"use client";

import Link from "next/link";
import { BookOpen, Menu, X } from "lucide-react";
import { useState } from "react";
import { useMedia } from "@/Theme/Jamkaran/Tools/useMedia";
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";

export default function HeaderHoze() {
  const [menu, setMenu] = useState(false);
  const { isMedia } = useMedia(768);
  const links = [
    {
      id: 1,
      label: "درباره",
      href: "#",
    },
    {
      id: 2,
      label: "دوره های آموزشی",
      href: "#",
    },
    {
      id: 3,
      label: "استاتید",
      href: "#",
    },
    {
      id: 4,
      label: "تماس",
      href: "#",
    },
  ];
  return (
    <header>
      <nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-emerald-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            <div className="flex items-center gap-3">
              <div className="w-14 h-14 bg-linear-to-br from-emerald-700 to-emerald-900 rounded-full flex items-center justify-center">
                <BookOpen className="w-8 h-8 text-white" />
              </div>
              <div>
                <div className="text-2xl text-emerald-900">حوزه علمیه قم</div>
                <div className="text-sm text-emerald-700">Hoze Elmiyeh Qom</div>
              </div>
            </div>
            <div className="hidden md:flex gap-8">
              {links?.map((link) => {
                return (
                  <Link
                    key={link?.id}
                    href={link?.href}
                    className="text-gray-700 hover:text-emerald-800 transition-colors"
                  >
                    {link?.label}
                  </Link>
                );
              })}
            </div>
            <button className="bg-emerald-800 hidden md:block text-white px-6 py-2 rounded-lg hover:bg-emerald-900 transition-colors">
              ثبت نام
            </button>
            <button
              onClick={() => setMenu(!menu)}
              className="md:hidden cursor-pointer"
            >
              <Menu />
            </button>
          </div>
        </div>
      </nav>
      {isMedia && (
        <AnimatePresence>
          {menu && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="w-screen h-screen fixed top-0 right-0 z-50"
            >
              <div
                onClick={() => setMenu(false)}
                className="absolute inset-0 bg-black/70"
              ></div>
              <motion.div
                className="h-screen w-2xs bg-[#0c2f29] relative z-2 flex flex-col"
                initial={{ width: "0px" }}
                animate={{ width: menu ? "360px" : "0px" }}
                exit={{ width: "0px" }}
              >
                <div
                  className="absolute inset-0 opacity-30 -z-1"
                  style={{ background: `url(${process.env.NEXT_PUBLIC_IMAGE_URL}/backgrounds/img1.png`}}
                ></div>
                <header className="flex bg-white items-center justify-between p-4 border-b border-primary">
                  <div>
                    <Link href={`/`}>
                      <Image
                        src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/logo/Jamkaran-Logo.png`}
                        alt="logo"
                        width={260}
                        height={73}
                        className="lg:w-[260px] w-40 aspect-260/73"
                      />
                    </Link>
                  </div>
                  <button
                    className="cursor-pointer!"
                    onClick={() => setMenu(false)}
                  >
                    <X />
                  </button>
                </header>
                <div className="body p-4 grow relative">
                  <ul className="flex flex-col gap-3 relative z-2">
                    {links?.map((link) => {
                      const Icon = link?.icon;
                      return (
                        <li
                          key={link?.id}
                          className="flex items-center gap-2 text-light hover:text-secondary transition-all duration-300"
                        >
                          {Icon && <Icon className="w-5 h-5" />}
                          <Link href={link?.href ?? "#"}>{link?.label}</Link>
                        </li>
                      );
                    })}
                  </ul>
                </div>
                <footer className="p-4">
                  <p className="text-xs text-light">
                    © 1405 تمامی حقوق این سایت برای مجموعه آموزشی جمکران محفوظ
                    است
                  </p>
                </footer>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      )}
    </header>
  );
}