import { Image } from '@tarojs/components';

import LoginButton from '@/components/login-button';
import { PageUrl } from '@/constants/app';
import { ReportEventId } from '@/constants/event';
import { reportEvent } from '@/utils/event';
import { redirectTo } from '@/utils/route';

import './index.less';

const PREFIX = 'page-certification-start';

export default function CertificationStart() {
  const handleClick = () => {
    reportEvent(ReportEventId.CLICK_START_CERTIFICATION);
    redirectTo(PageUrl.Certification);
  };

  return (
    <div className={PREFIX}>
      <Image
        mode="aspectFit"
        className={`${PREFIX}__icon`}
        src={require('@/statics/svg/certification-tips-icon.svg')}
      />
      <div className={`${PREFIX}__title`}>为了保障信息真实性，请进行实人认证，完成后即可</div>
      <div className={`${PREFIX}__tips`}>发布认证通告，优先展示</div>
      <LoginButton className={`${PREFIX}__button`} onClick={handleClick} needPhone>
        开始认证
      </LoginButton>
    </div>
  );
}
