import { useState } from 'react'
import { Button } from '@shared/ui'
import logo from '@shared/assets/logo-full-white.png'
import { IndividualForm } from './IndividualForm'
import { LegalRegisterInfo } from './LegalRegisterInfo'
import styles from './RegisterForm.module.css'

type RegisterType = 'individual' | 'legal'

export function RegisterForm() {
  const [type, setType] = useState<RegisterType | null>(null)

  return (
    <div className={styles.card}>
      <div className={styles.logo}>
        <img src={logo} alt="ЭКСА" />
      </div>
      <h1 className={styles.title}>Создать кошелёк ЭКСА</h1>

      {type === null ? (
        <div className={styles.typeSelect}>
          <Button variant="primary" onClick={() => setType('individual')}>
            Зарегистрироваться как физическое лицо
          </Button>
          <Button variant="outline" onClick={() => setType('legal')}>
            Зарегистрироваться как юридическое лицо
          </Button>
        </div>
      ) : (
        <>
          <button type="button" className={styles.back} onClick={() => setType(null)}>
            ← Назад к выбору
          </button>
          {type === 'individual' ? <IndividualForm /> : <LegalRegisterInfo />}
        </>
      )}
    </div>
  )
}
