import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { FormProps } from ".";
import RenderError, { ErrorClass } from "./Error";

export default function Email({ error = {}, handleKeyDown, handleInputChange, formData }: FormProps) {
  return (
    <div className='gap-1 flex flex-col'>
      <Label
        htmlFor='email'
        className='font-semibold leading-5 py-1 text-[14px]'
      >
        Email
      </Label>
      <Input
        type='email'
        id='email'
        name='email'
        autoComplete='off'
        className={
          error.email
            ? `${ErrorClass} focus-visible:!ring-0 focus-visible:border-[rgb(rgb(240,97,109)]`
            : ''
        }
        onKeyDown={event => handleKeyDown(event)}
        placeholder='Your email address'
        onChange={value => handleInputChange('email', value.target.value)}
        value={formData.email || ''}
      />
      <RenderError error={error.email} />

    </div>
  )
}