pasargad/src/components/layout/footer/Footer.tsx

'use client';

import { appConstants } from '@/assets/constants';
import { getQuickLinks } from '@/assets/constants/footerMenu/quickLinks.const';
import { getWhoAreWeLinks } from '@/assets/constants/footerMenu/whoAreWe.const';
import images from '@/assets/images/images';
import { Icon, IconName } from '@/components/uikit/icons';
import { TLocales } from '@/models/layout';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import FooterInfo from './FooterInfo';
import FooterMenuBuilder from './FooterMenuBuilder';
import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';

export default function Footer() {
  const t = useTranslations();
  const params = useParams();
  const locale = (params.locale as TLocales) || 'en';

  const quickLinks = getQuickLinks(t, locale);
  const whoAreWeLinks = getWhoAreWeLinks(t, locale);

  return (
    <div className="relative w-full bg-gray-500 pt-12 text-white md:pt-24">
      <div className="absolute inset-0 z-10 flex items-end justify-start">
        <div className="w-1/2 md:w-2/5">
          <Image
            alt="footer-bg"
            src={images.factoryVector}
            className="h-full w-full object-cover"
          />
        </div>
      </div>
      <div className="relative z-20 container mx-auto">
        <div className="flex max-w-[920px] flex-col gap-5 pb-10">
          <p className="text-3xl tracking-tighter md:text-5xl">
            {t('footer_title')}
          </p>
          <h5 className="text-base tracking-normal">
            {t('footer_description')}
          </h5>
        </div>
        <div className="flex items-start justify-between gap-8 border-y border-gray-300/50 py-14 max-lg:flex-col-reverse">
          <FooterInfo withLogo className="max-lg:mt-3 lg:max-w-[200px]" />
          <div className="grid w-full grid-cols-2 gap-5 md:grid-cols-3 md:gap-10 lg:max-w-3/5">
            <FooterMenuBuilder
              title={t('footer_links_quick_links')}
              links={quickLinks}
              className="max-md:text-center"
            />
            <FooterMenuBuilder
              title={t('footer_links_who_we_are')}
              links={whoAreWeLinks}
              className="max-md:text-center"
            />
            <FooterMenuBuilderWrapper
              title={t('footer_links_contact')}
              className="max-md:col-span-2 max-md:text-center"
            >
              <div className="flex flex-col gap-4">
                <Link
                  href="tel:+9812345678"
                  className="text-sm tracking-tight text-gray-100 hover:text-gray-200"
                >
                  +98 12345678
                </Link>
                <Link
                  href="mailto:info@sample.com"
                  className="text-sm tracking-tight text-gray-100 hover:text-gray-200"
                >
                  info@sample.com
                </Link>
                <span className="text-sm tracking-tight text-gray-100 hover:text-gray-200">
                  {t('footer_links_address')}
                </span>
              </div>

              <div className="flex items-center gap-4 max-lg:justify-center">
                {appConstants.socials.map((social) => (
                  <Link
                    href={social.link}
                    key={social.title}
                    className="text-white lg:flex-1"
                  >
                    <Icon
                      name={social.icon as IconName}
                      className="text-primary"
                    />
                  </Link>
                ))}
              </div>
            </FooterMenuBuilderWrapper>
          </div>
        </div>

        <div className="py-8 lg:py-14">
          <p className="text-center text-sm">
            {t('footer_copyright', { year: new Date().getFullYear() })}
          </p>
        </div>
      </div>
    </div>
  );
}