import ContactForm from './ContactForm';
import { homepageContactLeftPane } from '@/lib/homepage';

const ContactUs = async ({ language }: any) => {
  const leftData = await homepageContactLeftPane(language);
  const contactTableData = [
    {
      label: leftData?.phoneLabel,
      value: leftData?.phoneValue,
    },
    {
      label: leftData?.emaillabel,
      value: leftData?.emailValue,
    },
    {
      label: leftData?.addresslabel,
      value: leftData?.addressValue,
    },
  ];

  return (
    <div className='flex sm:flex-col'>
      {/* Contact Details */}
      <div className='w-[45%] sm:w-full bg-yellow-600 text-white px-8 sm:px-[18px] py-6 md:py-16 sm:pt-[45px] sm:pb-[66px] lg:rounded-l-[10px] md:rounded-l-[10px] sm:rounded-t-[4px]'>
        <div className='flex flex-col'>
          <h1 className='font-bold lg:mb-4'>{leftData?.heading}</h1>
          <div className='lg:text-lg text-base mb-8'>
            {leftData?.subheading}
          </div>
          <div className=''>
            <h1 className='text-lg md:text-lg sm:text-base font-bold mb-[1rem]'>
              {leftData?.contactHeading}
            </h1>
            <div className='flex'>
              <div className='lg:text-lg text-base'>
                <table className='w-full'>
                  <tbody>
                    {contactTableData?.map((item) => (
                      <tr key={item?.label} className='align-top'>
                        <td className='align-center lg:pt-1 sm:pt-1 pb-3'>
                          <div className='bg-yellow-200 min-w-5 md:min-w-[17.281px] sm:min-w-[7.907px] min-h-5 md:min-h-[17.281px] sm:min-h-[7.907px] rounded-[50%]' />
                        </td>
                        <td className='font-bold align-top px-4 pb-3'>
                          {item?.label}:
                        </td>
                        <td className='align-top pb-3'>{item?.value}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* <div>
                <div className='flex flex-col items-start justify-start lg:text-2xl text-xs'>
                  <div className='flex flex-col items-start justify-start max-w-full'>
                    <div className='flex items-center mb-6 md:mb-[1.125rem] sm:mb-5 space-x-5 md:space-x-[10.5px] sm:space-x-[5px]'>
                      <span>{leftData?.phoneValue}</span>
                    </div>
                    <div className='flex items-center mb-6 md:mb-[1.125rem] sm:mb-5 space-x-5 md:space-x-[10.5px] sm:space-x-[5px]'>
                      <span>{leftData?.emailValue}</span>
                    </div>
                    <div className='flex items-start space-x-5 md:space-x-[10.5px] sm:space-x-[5px]'>
                      <div>
                        <p>
                          <span>{leftData?.addressValue}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div> */}
            </div>
          </div>
        </div>
      </div>

      {/* Form */}
      <ContactForm language={language} />
    </div>
  );
};

export default ContactUs;