"use client";

import Link from "next/link";
import Drawer from "@/components/ui/Drawer/Drawer";
import { mainNav, siteConfig } from "@/config/site";
import { useUI } from "@/context/UIContext";

export default function MobileNavigation() {
  const { mobileMenuOpen, closeMobileMenu } = useUI();

  return (
    <Drawer open={mobileMenuOpen} onClose={closeMobileMenu} side="left" title="Menu">
      <nav className="flex flex-col px-5 py-6">
        {mainNav.map((item) => (
          <Link
            key={item.href}
            href="/"
            onClick={closeMobileMenu}
            className="border-b border-mist py-4 font-display text-lg font-semibold uppercase tracking-wide"
          >
            {item.label}
          </Link>
        ))}
        <Link
          href="/"
          onClick={closeMobileMenu}
          className="py-4 font-display text-sm font-semibold uppercase tracking-wide text-graphite"
        >
          Contact
        </Link>
        <Link
          href="/"
          onClick={closeMobileMenu}
          className="py-2 font-display text-sm font-semibold uppercase tracking-wide text-graphite"
        >
          FAQ
        </Link>
        <a
          href={siteConfig.social.instagram}
          target="_blank"
          rel="noreferrer"
          className="mt-6 text-sm text-graphite"
        >
          Follow us on Instagram
        </a>
      </nav>
    </Drawer>
  );
}