'use client';

import SectionTitle from '@/components/layout/sectionTitle';
import { Icon } from '@/components/uikit/icons';
import { TLocales } from '@/models/layout';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';

const TouchUs = ({ className = '' }) => {
  const t = useTranslations();
  const params = useParams();
  const locale = params.locale as TLocales;

  return (
    <div className={`w-full ${className}`}>
      <SectionTitle
        title={t('pages_contact_title')}
        description={t('com_contact_touch_title')}
        description_bold={t('com_contact_touch_title_bold')}
        locale={locale}
      />
      <p className="mt-4 mb-10 text-base font-normal text-gray-600">
        {t('com_contact_touch_description')}
      </p>

      <div className="flex flex-col justify-between gap-10">
        <div className="flex items-center">
          <div className="me-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
            <Icon name="phone" className="text-white" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-800">
              {t('com_contact_touch_option_1')}
            </h3>
            <p className="text-gray-600">+44 (0) 20 1234 5678</p>
          </div>
        </div>

        <div className="flex items-center">
          <div className="me-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
            <Icon name="email" className="text-white" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-800">
              {t('com_contact_touch_option_2')}
            </h3>
            <p className="text-gray-600">support@mybusiness.com</p>
          </div>
        </div>

        <div className="flex items-center">
          <div className="me-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
            <Icon name="location" className="text-white" />
          </div>
          <div>
            <h3 className="font-semibold text-gray-800">
              {t('com_contact_touch_option_3')}
            </h3>
            <p className="text-gray-600">
              {t('com_contact_touch_option_3_description')}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TouchUs;
