import { useState } from 'react';
import PersonIcon from '../../public/icons/person.svg';
import EmailIcon from '../../public/icons/email.svg';
import PhoneIcon from '../../public/icons/phone.svg';
import FacebookIcon from '../../public/icons/fb.svg';
import IgIcon from '../../public/icons/ig.svg';
import Form from './Form';
import { useTranslation } from 'next-i18next';

const SupportForm: React.FC = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [message, setMessage] = useState('');
  const { t } = useTranslation('support');

  return (
    <Form
      className='flex flex-col px-4 py-5 bg-white space-y-4 text-customBlack w-full !w-full max-w-full'
      onSubmit={() => {
        console.log('Submit');
      }}
    >
      <div className='flex flex-col md:flex-row md:space-x-14 text-left w-full'>
        <div className='flex flex-col md:flex-1 w-full'>
          <div className='flex flex-col mb-6'>
            <label htmlFor='name'>{t('formName')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <PersonIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input g-border border-none'
                type='text'
                name='name'
                id='name'
                value={name}
                onChange={e => setName(e.target.value)}
              />
            </div>
          </div>
          <div className='flex flex-col mb-6'>
            <label htmlFor='email'>{t('formEmail')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <EmailIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input'
                type='text'
                name='email'
                id='email'
                value={email}
                onChange={e => setEmail(e.target.value)}
              />
            </div>
          </div>
          <div className='flex flex-col mb-6 md:mb-0'>
            <label htmlFor='phone'>{t('formPhone')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <PhoneIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input'
                type='text'
                name='phone'
                id='phone'
                value={phone}
                onChange={e => setPhone(e.target.value)}
              />
            </div>
          </div>
        </div>

        <div className='flex flex-col mb-6 xs:mb-0 md:flex-1 w-full'>
          <label htmlFor='message'>{t('formMessage')}</label>
          <textarea
            className='g-input g-border w-full h-full resize-none'
            name='message'
            id='message'
            value={message}
            onChange={e => setMessage(e.target.value)}
          />
        </div>
      </div>

      <div className='flex flex-col space-y-4 xs:flex-row xs:space-y-0 justify-between items-center'>
        <div className='flex space-x-4'>
          {/* <a
            href=''
            target='_blank'
            rel='noopener noreferrer'
          >
            <TwitterIcon className='cursor-pointer' width='20' height='20' fill='#367DEE' />
          </a> */}
          <a href='https://www.facebook.com/CCN-Telecom-100738098785355' target='_blank' rel='noopener noreferrer'>
            <FacebookIcon className='cursor-pointer' width='20' height='20' fill='#367DEE' />
          </a>
          <a href='https://www.instagram.com/ccntelecom210/' target='_blank' rel='noopener noreferrer'>
            <IgIcon className='cursor-pointer' width='20' height='20' fill='#367DEE' />
          </a>
        </div>
        <button
          type='submit'
          className={`g-primary-button self-center text-lg 2xl:text-2xl py-2 rounded-none bg-primary text-white`}
        >
          {t('submit')}
        </button>
      </div>
    </Form>
  );
};

export default SupportForm;