"use client";

import { useCookieConsent } from "@/components/cookies";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { container } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";

export function Footer() {
  const { t } = useTranslation();
  const { openModal } = useCookieConsent();
  
  // Definiraj linkove s prijevodima
  const navLinks = [
    { name: t('footer.build_box'), href: "/build-box" },
    { name: t('footer.products'), href: "/products" },
    { name: t('footer.about'), href: "/about" }
  ];

  const legalLinks = [
    { name: t('footer.privacy_policy'), href: "/privacy-policy" },
    { name: t('footer.terms_of_service'), href: "/terms-of-service" },
    { name: t('footer.cookies_settings'), href: "#", isButton: true }
  ];

  const socialLinks = [
    { name: t('footer.social.facebook'), href: "https://facebook.com/sentshop", icon: "/assets/images/Facebook.png" },
    { name: t('footer.social.instagram'), href: "https://instagram.com/sentshop", icon: "/assets/images/Instagram.png" }
  ];
  
  const handleCookiesSettings = () => {
    openModal();
  };

  return (
    <footer className="bg-gray-100">
      <div className={container}>
        {/* Main footer content */}
        <div className="py-12">
          <div className="flex flex-col md:flex-row md:justify-between md:items-center">
            {/* Logo */}
            <div className="flex justify-center md:justify-start mb-8 md:mb-0">
              <Link href="/" aria-label="Logo">
                <Image 
                  src="/assets/images/logo.svg" 
                  alt="SENT logo" 
                  width={125} 
                  height={35} 
                  className="w-[125px] h-auto object-contain"
                />
              </Link>
            </div>

            {/* Navigation */}
            <nav className="flex flex-col items-center md:flex-row md:space-x-8 mb-8 md:mb-0">
              {navLinks.map((link, index) => (
                <Link
                  key={index}
                  href={link.href}
                  className="text-[16px] font-bold text-gray-700 hover:text-gray-900 mb-4 md:mb-0"
                >
                  {link.name}
                </Link>
              ))}
            </nav>

            {/* Social media icons */}
            <div className="flex items-center justify-center md:justify-end space-x-6 mb-8 md:mb-0">
              {socialLinks.map((social, index) => (
                <Link 
                  key={index}
                  href={social.href} 
                  aria-label={social.name} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-gray-500 hover:text-gray-700"
                >
                  <Image
                    src={social.icon}
                    alt={social.name}
                    width={20}
                    height={20}
                  />
                </Link>
              ))}
            </div>
          </div>
        </div>

        {/* Legal footer */}
        <div className="border-t border-gray-200">
          <div className="py-6">
            <div className="flex flex-col md:flex-row justify-center items-center text-[14px] leading-[21px] text-gray-500 space-y-4 md:space-y-0 md:space-x-6">
              <span>&copy; {new Date().getFullYear()} Sent. {t('footer.all_rights_reserved')}</span>
              {legalLinks.map((link, index) => (
                link.isButton ? (
                  <button
                    key={index}
                    onClick={handleCookiesSettings}
                    className="hover:text-gray-700 text-[14px] leading-[21px]"
                  >
                    {link.name}
                  </button>
                ) : (
                  <Link
                    key={index}
                    href={link.href}
                    className="hover:text-gray-700 text-[14px] leading-[21px]"
                  >
                    {link.name}
                  </Link>
                )
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}