"use client";

import { footerL, footerR } from "@/constans";
import Logo from "@/app/component/Logo";
import Link from "next/link";

// Icons
import Linkedin from "../../icons/Linkedin";
import Telegram from "../../icons/Telegram";
import Whatsapp from "../../icons/Whatsapp";
import Instagram from "../../icons/Instagram";
import LocationF from "../../icons/LocationF";
import CalendarAddF from "../../icons/CalendarAddF";
import StethoscopeF from "../../icons/StethoscopeF";
import LogoNamad from "./LogoNamad";
import HeadMenu from "./menu/HeadMenu";
import ListMenu from "./menu/ListMenu";
import { useState } from "react";

const head = [
  { icon: <LocationF />, text: "جستجوی پزشک در شهر شما" },
  { icon: <CalendarAddF />, text: "نوبت گیری سریع و آسان" },
  {
    icon: <StethoscopeF />,
    text: "دشبورد اختصاصی برای پزشکان",
    link: "https://clinic-pro.ir/",
  },
];

function Footer({ matchedCity }) {
  const socialMedias = [
    {
      icon: <Instagram />,
      name: "instagram",
    },
    {
      icon: <Telegram />,
      name: "telegram",
    },
    {
      icon: <Whatsapp />,
      name: "whatsapp",
    },
  ];
  const [openMenu, setOpenMenu] = useState({
    right: false,
    left: false,
  });

  const changeMenu = (name) =>
    setOpenMenu({ ...openMenu, [name]: !openMenu[name] });

  return (
    <div className="pb-[11px]">
      <div className="flex items-center justify-evenly gap-[12px]">
        {head.map((item, idx) => (
          <Link
            key={idx}
            href={item.link || ""}
            onClick={(e) => !item.link && e.preventDefault}
          >
            <div
              className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all 
            transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
            >
              {item.icon}
              <p className="text-[#2F2F2F] text-center text-[12px] sm:text-[14px] md:text-[16px] font-medium">
                {item.text}
              </p>
            </div>
          </Link>
        ))}
      </div>
      <span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
      <div
        className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px] 
                flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
      >
        {/* Right */}
        <div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
          {/* Icon */}
          <Logo matchedCity={matchedCity} />
          <p className="w-full lg:w-fit lg:max-w-[260px] text-[#616161] text-[14px] font-normal">
            {matchedCity?.footerDescription}
          </p>
          <div className="hidden lg:flex">
            <LogoNamad />
          </div>
        </div>

        {/* Center */}
        <div className="w-full lg:w-fit">
          <HeadMenu
            title={footerR[0]}
            isOpen={openMenu.right}
            name="right"
            changeMenu={changeMenu}
          />
          <ListMenu list={footerR} isOpen={openMenu.right} />
        </div>
        <div className="w-full lg:w-fit">
          <HeadMenu
            title={footerL[0]}
            isOpen={openMenu.left}
            name="left"
            changeMenu={changeMenu}
          />
          <ListMenu list={footerL} isOpen={openMenu.left} />
        </div>

        {/* Left */}
        <div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[32px]">
          <p className="text-[#3B3B3B] after:!duration-500 w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
            همراه با ما باشید:
          </p>
          <ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
            {socialMedias.map((item, idx) => (
              <li
                key={idx}
                className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
              >
                <Link
                  href={matchedCity?.socialMedia[item.name] || "/"}
                  className="min-h-fit"
                  aria-label={item.name}
                >
                  {item.icon}
                </Link>
              </li>
            ))}
          </ul>
        </div>
        <div className="flex lg:hidden justify-center w-full mt-2">
          <LogoNamad />
        </div>
      </div>
      <p className="text-center text-[#7E7E7E] text-[12px] font-normal">
        {matchedCity?.footerDisclaimer}
      </p>
    </div>
  );
}

export default Footer;