"use client";

import { useState } from "react";
import { Menu, X } from "lucide-react";
import { useTranslations } from "next-intl";
import { Link } from "@/lib/i18n/navigation";
import { cn } from "@/lib/utils";
import { LanguageSwitcher } from "./LanguageSwitcher";

const navKeys = ["home", "writing", "work", "about", "shop", "uses", "resume", "contact"] as const;
const navHrefs: Record<string, string> = {
  home: "/",
  writing: "/writing",
  work: "/work",
  about: "/about",
  shop: "/shop",
  uses: "/uses",
  resume: "/resume",
  contact: "/contact",
};

export function MobileMenu() {
  const [open, setOpen] = useState(false);
  const t = useTranslations("nav");

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="p-2 text-text-secondary hover:text-text-primary md:hidden"
        aria-label="Open menu"
      >
        <Menu size={20} />
      </button>

      {open && (
        <div className="fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-md md:hidden">
          <div className="flex items-center justify-between border-b border-border px-6 py-4">
            <span className="font-mono text-sm text-accent">// menu</span>
            <button
              onClick={() => setOpen(false)}
              className="p-2 text-text-secondary hover:text-text-primary"
              aria-label="Close menu"
            >
              <X size={20} />
            </button>
          </div>

          <nav className="flex flex-1 flex-col gap-2 px-6 pt-8">
            {navKeys.map((key) => (
              <Link
                key={key}
                href={navHrefs[key]}
                onClick={() => setOpen(false)}
                className="rounded-md px-4 py-3 text-lg font-medium text-text-secondary transition-colors hover:bg-surface hover:text-text-primary"
              >
                {t(key)}
              </Link>
            ))}
          </nav>

          <div className="border-t border-border px-6 py-6">
            <LanguageSwitcher />
          </div>
        </div>
      )}
    </>
  );
}
