"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 socialMedias = [<Linkedin />, <Telegram />, <Whatsapp />, <Instagram />];

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

function Footer() {
  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) => (
          <div
            key={idx}
            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-[16px] font-medium">
              {item.text}
            </p>
          </div>
        ))}
      </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 />
          <p className="w-full lg:w-fit text-[#616161] text-[14px] font-normal">
            724 یک وبسایت نوبت دهی آنلاین می باشد که
            <br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران
            فراهم کرده
            <br className="hidden lg:flex" /> است.{" "}
          </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="/" className="min-h-fit">
                  {item}
                </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">
        کلیه حقوق وبسایت برای این شرکت می باشد.
      </p>
    </div>
  );
}

export default Footer;