import type { LoginComplete } from '@/entities/session'
import { LoginByCodeForm, useLoginByCode } from '@/features/login-by-code'
import { t } from '@/shared/i18n'
import { BackLink, Heading, RetryHint } from '@/shared/ui'
import { AuthPanel } from '@/widgets/auth-panel'

export function LoginCodePage({ onComplete }: { onComplete: LoginComplete }) {
  const model = useLoginByCode(onComplete)
  return (
    <AuthPanel
      heading={
        <Heading
          title={model.sentEmail ? t('loginCode.titleSent') : t('loginCode.title')}
          description={model.sentEmail ? t('loginCode.descriptionSent') : t('loginCode.description')}
        />
      }
      notice={model.task.notice}
      footer={
        <>
          <RetryHint seconds={model.retry} />
          <BackLink>{t('loginCode.back')}</BackLink>
        </>
      }
    >
      <LoginByCodeForm model={model} />
    </AuthPanel>
  )
}