"use client";

import { useTranslation } from "@/components/i18n/locale-provider";
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[] }) {
  const { t } = useTranslation();
  return (
    <div className="lg:hidden">
      <Drawer showSwipeHandle>
        <DrawerTrigger render={<Button variant="outline" className="w-full" />}>
          <ListTreeIcon aria-hidden="true" />
          {t("สารบัญหน้านี้")}</DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>{t("สารบัญหน้านี้")}</DrawerTitle>
            <DrawerDescription>{t("เลือกหัวข้อเพื่อเลื่อนไปยังเนื้อหา")}</DrawerDescription>
          </DrawerHeader>
          <nav aria-label={t("สารบัญบนมือถือ")} 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"
                  />
                }
              >
                {t(section.label)}
              </DrawerClose>
            ))}
          </nav>
        </DrawerContent>
      </Drawer>
    </div>
  );
}