import Button from '@/components/uikit/button';
import FormField from '@/components/uikit/inputs';
import { t } from '@/locales/translates';

const ContactForm = () => {
  return (
    <div className="w-full rounded-4xl bg-white p-4 md:w-1/2">
      <h2 className="mt-8 mb-10 text-5xl text-gray-800">
        {t('com_contact_title') as string}{' '}
        <span className="text-5xl font-bold">
          {' '}
          {t('com_contact_title_bold') as string}
        </span>
      </h2>
      <div className="space-y-6">
        <div className="flex flex-col gap-6 md:flex-row md:gap-8">
          <FormField
            type="text"
            placeholder={t('com_contact_first_name') as string}
          />

          <FormField
            type="text"
            placeholder={t('com_contact_last_name') as string}
          />
        </div>
        <FormField
          type="email"
          placeholder={t('com_contact_email') as string}
        />
        <FormField type="tel" placeholder={t('com_contact_phone') as string} />
        <FormField
          type="textarea"
          placeholder={t('com_contact_textarea') as string}
        />

        <Button className="w-full">Submit Message</Button>
      </div>
    </div>
  );
};

export default ContactForm;