import Segment from '../../shared/segment';
import { CheckSmsKeyRequestDataType, CheckSmsKeyRequestReturnType } from '../../../api/temp-user';
import { APIErrorType } from '../../../api';
import MobileView from './mobile-view';
import ResendView from './resend-view';
import SmsKeyForm from './sms-key-form';

export type SmsKeyFormData = CheckSmsKeyRequestDataType;
export type SmsKeyFormPropsType = {
  mobile: string;
  onSubmit: (data: CheckSmsKeyRequestReturnType) => void;
  onBack: () => void;
  onError: (error: APIErrorType) => void;
};

function SmsKey({ mobile, onSubmit, onBack, onError }: SmsKeyFormPropsType) {
  return (
    <Segment dataTestId='smskey-content'>
      <p className='my-6 text-center font-medium'>فرم ارسال کد احراز هویت</p>
      <hr />
      <MobileView mobile={mobile} onBack={onBack} className='text-large text-center' />
      <hr />
      <SmsKeyForm mobile={mobile} onSubmit={onSubmit} onError={onError} />
      <hr />
      <ResendView mobile={mobile} onError={onError} className='text-large mt-4 text-center' />
    </Segment>
  );
}

export default SmsKey;
