import { category_api } from '@/shared/config/api/category/api';
import { Link } from '@/shared/config/i18n/navigation';
import { PRODUCT_INFO } from '@/shared/constants/data';
import formatPhone from '@/shared/lib/formatPhone';
import { useQuery } from '@tanstack/react-query';
import { Facebook, Instagram, Mail, Phone, Send, Twitter } from 'lucide-react';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { Fragment } from 'react';

const Footer = () => {
  const t = useTranslations();
  const { data: category } = useQuery({
    queryKey: ['category_list'],
    queryFn: () => category_api.getCategory({ page: 1, page_size: 12 }),
    select(data) {
      return data.data.results;
    },
  });

  return (
    <section className="max-lg:py-9 max-lg:bg-white max-lg:border-none max-lg:hidden py-12 z-50 w-full bg-[#57A595] border-t border-slate-200">
      <div className="custom-container max-lg:hidden">
        <div className="flex w-full gap-10 flex-col items-center justify-between text-center lg:flex-row lg:items-start lg:text-left">
          <div className="flex w-fit flex-col items-center justify-between gap-4 lg:items-start mb-8 lg:mb-0">
            <div className="flex items-center gap-1 lg:justify-start">
              <div className="p-2">
                <Image
                  width={500}
                  height={500}
                  src={'/logos/logo-white.png'}
                  alt={PRODUCT_INFO.name}
                  title={PRODUCT_INFO.name}
                  unoptimized
                  className="h-10 w-10"
                />
              </div>
              <h2 className="text-xl font-bold text-white">
                {PRODUCT_INFO.name}
              </h2>
            </div>
            <p className="text-white font-semibold text-md">
              {t(
                "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin",
              )}
            </p>
          </div>
          <div className="grid w-full grid-cols-1 md:grid-cols-3 gap-8 lg:gap-16">
            <div>
              <h3 className="mb-2 font-bold text-lg text-muted">
                {t('Kategoriyalar')}
              </h3>
              <ul className="space-y-2 text-sm">
                {category?.slice(0, 6)?.map((link) => (
                  <Fragment key={link.id}>
                    <li
                      key={link.id}
                      className="text-white hover:text-gray-300 transition-colors cursor-pointer"
                    >
                      <Link href={`/category/${link.id}/`}>{link.name}</Link>
                    </li>
                  </Fragment>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="mb-2 font-bold text-base text-muted">
                {t('Sahifalar')}
              </h3>
              <ul className="space-y-2 text-sm">
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <Link href={'/about'}>{t('Biz haqimizda')}</Link>
                </li>
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <Link href={'/privacy-policy'}>
                    {t('Maxfiylik siyosati')}
                  </Link>
                </li>
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <Link href={'/faq'}>{t('Savol-javob')}</Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="mb-2 font-bold text-base text-muted">
                {t("Biz bilan bog'laning")}
              </h3>
              <ul className="space-y-2 text-sm">
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <a href={'#'} className="flex items-center gap-2">
                    <Send className="size-4" />
                    <p>Telegram</p>
                  </a>
                </li>
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <a href={'#'} className="flex items-center gap-2">
                    <Instagram className="size-4" />
                    <p>Instagram</p>
                  </a>
                </li>
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <a href={'#'} className="flex items-center gap-2">
                    <Facebook className="size-4" />
                    <p>Facebook</p>
                  </a>
                </li>
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <a href={'#'} className="flex items-center gap-2">
                    <Twitter className="size-4" />
                    <p>Twitter</p>
                  </a>
                </li>
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <a href={'#'} className="flex items-center gap-2">
                    <Mail className="size-4" />
                    <p>e-mail</p>
                  </a>
                </li>
                <li className="text-muted hover:text-gray-300 transition-colors cursor-pointer">
                  <a href={'#'} className="flex items-center gap-2">
                    <Phone className="size-4" />
                    <p>{formatPhone('+998901234567')}</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Footer;