'use client'
import {useState} from 'react'
import {Menu} from 'lucide-react'
import {
  Drawer,
  DrawerContent,
  DrawerTrigger,
} from '@/components/ui/drawer'
import Sidebar from './sidebar'

export default function SidebarDrawer() {
  const [open, setOpen] = useState(false)

  return (
    <div className="md:hidden flex items-center justify-between bg-white rounded-lg p-3">
      <span className="font-medium text-slate-900">帮助中心</span>
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerTrigger asChild>
          <button className="flex items-center gap-2 text-slate-600 hover:text-slate-900 p-1 cursor-pointer">
            <Menu size={20}/>
            <span className="text-sm">目录</span>
          </button>
        </DrawerTrigger>
        <DrawerContent>
          <div className="mx-auto w-full max-w-sm">
            <div className="px-4 py-3 border-b">
              <h3 className="text-lg font-semibold text-slate-900">帮助中心</h3>
            </div>
            <div className="px-2 py-2 max-h-[70vh] overflow-y-auto">
              <Sidebar onClose={() => setOpen(false)}/>
            </div>
          </div>
        </DrawerContent>
      </Drawer>
    </div>
  )
}