"use client";

import { useState } from "react";
import { Menu, X, Home, Box, Briefcase, Newspaper, LogIn } from "lucide-react";
import Link from "next/link";

export default function FloatingMenu() {
  const [open, setOpen] = useState(false);

  return (
    <>
      {/* FLOATING BUTTON */}
      <button
        onClick={() => setOpen(true)}
        className="fixed right-6 top-6 z-[100] flex h-12 w-12 items-center justify-center rounded-md bg-[#966314] text-white shadow-lg"
      >
        <Menu />
      </button>

      {/* OVERLAY */}
      {open && (
        <div
          onClick={() => setOpen(false)}
          className="fixed inset-0 z-[90] bg-black/40"
        />
      )}

      {/* SIDEBAR */}
      <aside
        className={`fixed right-0 top-0 z-[110] h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        {/* HEADER */}
        <div className="flex items-center justify-between border-b border-white/20 p-6">
          <div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
            <button className="rounded-full bg-white px-3 py-1">ID</button>
            <button className="px-3 py-1">EN</button>
          </div>

          <button onClick={() => setOpen(false)}>
            <X />
          </button>
        </div>

        {/* MENU */}
        <nav className="flex flex-col gap-6 p-6 text-sm font-medium">
          <MenuItem icon={<Home size={18} />} label="Home" />
          <MenuItem icon={<Box size={18} />} label="Product" />
          <MenuItem icon={<Briefcase size={18} />} label="Services" />
          <Link href="/news-services?highlight=1">
            <MenuItem
              icon={<Newspaper size={18} />}
              label="News and Services"
            />
          </Link>
          <Link href="/auth">
            <MenuItem icon={<LogIn size={18} />} label="Login" />
          </Link>
        </nav>
      </aside>
    </>
  );
}

function MenuItem({ icon, label }: { icon: React.ReactNode; label: string }) {
  return (
    <div className="flex cursor-pointer items-center justify-between border-b border-white/20 pb-3">
      <span>{label}</span>
      {icon}
    </div>
  );
}