"use client";

import * as React from "react";
import { usePathname } from "next/navigation";
import { Menu } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { panelTexts } from "@/lib/i18n/panel";
import { PanelNav } from "@/components/panel/sidebar";

export function PanelMobileNav() {
  const [open, setOpen] = React.useState(false);
  const pathname = usePathname();

  // Close the drawer whenever the route changes.
  React.useEffect(() => {
    setOpen(false);
  }, [pathname]);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="icon-lg"
          aria-label={panelTexts.header.openMenu}
          className="lg:hidden"
        >
          <Menu className="size-5" />
        </Button>
      </SheetTrigger>
      <SheetContent
        side="left"
        className="gap-0 bg-[var(--sidebar)] p-0 text-white data-[side=left]:w-[17rem] data-[side=left]:border-r-0 data-[side=left]:sm:max-w-[17rem]"
      >
        <SheetTitle className="sr-only">{panelTexts.header.navigation}</SheetTitle>
        <SheetDescription className="sr-only">
          {panelTexts.header.navigationHint}
        </SheetDescription>
        <PanelNav onNavigate={() => setOpen(false)} />
      </SheetContent>
    </Sheet>
  );
}

export default PanelMobileNav;