import React from 'react'
import { useFormContext, useController } from 'react-hook-form'
import { StyledTextField } from '../Email/StyledEmail.styled'
import { IEmailProps } from './types'
import { LABELS } from './utils/labels'
import { type FC } from 'react'

export const Email: FC<IEmailProps> = () => {
  const {
    control,
    formState: { errors },
  } = useFormContext()

  const { field } = useController({
    name: 'email',
    control,
    defaultValue: '',
  })

  return (
    <StyledTextField
      value={field.value}
      type={LABELS.type}
      placeholder={LABELS.placeholder}
      error={!!errors[field.name]?.message}
      onSubmit={field.onChange}
      required
      fullWidth
    />
  )
}