"use client";
import Image from "next/image";
import Logo from "@/image/Logo.svg";
import { ListIcon, XIcon } from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import { useState, useEffect } from "react";

export default function Navbar() {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState("about-us");

  const menu = [
    { label: "About Us", url: "#about-us", id: "about-us" },
    { label: "Services", url: "#services", id: "services" },
    { label: "Portfolio", url: "#portfolio", id: "portfolio" },
    { label: "Process", url: "#process", id: "process" },
    { label: "Kontak", url: "#kontak", id: "kontak" },
  ];

  useEffect(() => {
    const ids = ["about-us", "services", "portfolio", "process", "kontak"];
    const sections = ids.map((id) => document.getElementById(id)).filter(Boolean) as HTMLElement[];
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) setActive(entry.target.id);
        });
      },
      { rootMargin: "-50% 0px -50% 0px" }
    );
    sections.forEach((section) => observer.observe(section));
    return () => observer.disconnect();
  }, []);

  return (
    <>
      <div className="bg-white px-4 h-19.5 md:h-18.5 flex items-center w-full justify-between md:py-5.5 md:px-16 sticky top-0 left-0 right-0 z-50">
        <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
        <button onClick={() => setOpen(true)} className="md:hidden">
          <ListIcon className="size-8 text-secondary-400 cursor-pointer" />
        </button>
        <div className="md:flex gap-7.5 hidden">
          {menu?.map((item) => (
            <Link href={item.url} key={item.label}>
              <div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div>
            </Link>
          ))}
        </div>
      </div>

      {open && <div className="fixed inset-0 bg-black/50 z-50 md:hidden" onClick={() => setOpen(false)} />}

      <div className={`fixed top-0 right-0 h-full w-64 bg-white z-50 transform transition-transform duration-300 md:hidden ${open ? "translate-x-0" : "translate-x-full"}`}>
        <div className="flex justify-between items-center p-4">
          <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
          <button onClick={() => setOpen(false)}>
            <XIcon className="size-6 text-secondary-400" />
          </button>
        </div>
        <div className="flex flex-col gap-4 p-4">
          {menu?.map((item) => (
            <Link href={item.url} key={item.label} onClick={() => setOpen(false)}>
              <div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div>
            </Link>
          ))}
        </div>
      </div>
    </>
  );
}