"use client";

import { ListTreeIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

export interface GuideSectionLink {
  id: string;
  label: string;
}

export function SectionDrawer({ sections }: { sections: GuideSectionLink[] }) {
  return (
    <div className="lg:hidden">
      <Drawer showSwipeHandle>
        <DrawerTrigger render={<Button variant="outline" className="w-full" />}>
          <ListTreeIcon aria-hidden="true" />
          สารบัญหน้านี้
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>สารบัญหน้านี้</DrawerTitle>
            <DrawerDescription>เลือกหัวข้อเพื่อเลื่อนไปยังเนื้อหา</DrawerDescription>
          </DrawerHeader>
          <nav aria-label="สารบัญบนมือถือ" className="grid gap-1 overflow-y-auto p-4">
            {sections.map((section) => (
              <DrawerClose
                key={section.id}
                render={
                  <a
                    href={`#${section.id}`}
                    className="flex min-h-11 items-center rounded-lg px-3 text-left text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  />
                }
              >
                {section.label}
              </DrawerClose>
            ))}
          </nav>
        </DrawerContent>
      </Drawer>
    </div>
  );
}