import type { MeResponse } from '@features/auth'
import { FormField } from '@shared/ui'
import { ProfileSection } from '@widgets/profile'
import styles from './ProfilePage.module.css'

interface Props {
  data: MeResponse
  fullName: string
  phone: string
  onPhoneChange: (value: string) => void
  onPhoneBlur: () => void
}

export function IndividualFields({ data, fullName, phone, onPhoneChange, onPhoneBlur }: Props) {
  return (
    <>
      <ProfileSection title="Личные данные">
        <div className={styles.grid2}>
          <FormField label="Полное ФИО" value={fullName} placeholder="Например: Иванов Иван Иванович" readOnly />
          <FormField label="Адрес электронной почты" value={data.email ?? ''} type="email" icon="check" placeholder="example@mail.ru" readOnly />
          <FormField label="Серия и номер паспорта" value={data.passport_data ?? ''} placeholder="0000 000000" readOnly />
          <FormField label="Номер телефона" value={phone} onChange={onPhoneChange} onBlur={onPhoneBlur} type="tel" placeholder="+7 (999) 000-00-00" />
        </div>
      </ProfileSection>

      <ProfileSection title="Верификация">
        <div className={styles.grid2}>
          <FormField label="ИНН" value={data.inn ?? ''} readOnly icon="lock" placeholder="000000000000" />
          <FormField label="ID аккаунта" value={data.id ?? ''} readOnly icon="lock" placeholder="ECSA-00000000" />
        </div>
      </ProfileSection>
    </>
  )
}