Drawer

import type { ReactNode } from "react"

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

export function ActionDrawer({
  trigger,
  title,
  description,
  children,
  actionLabel = "Save",
  cancelLabel = "Cancel",
  direction = "bottom",
  onAction,
}: {
  trigger: ReactNode
  title: string
  description?: string
  children?: ReactNode
  actionLabel?: string
  cancelLabel?: string
  direction?: "top" | "right" | "bottom" | "left"
  onAction?: () => void
}) {
  return (
    <Drawer direction={direction}>
      <DrawerTrigger asChild>{trigger}</DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-md group-data-[vaul-drawer-direction=left]/drawer-content:mx-0 group-data-[vaul-drawer-direction=right]/drawer-content:mx-0">
          <DrawerHeader>
            <DrawerTitle>{title}</DrawerTitle>
            {description ? (
              <DrawerDescription>{description}</DrawerDescription>
            ) : null}
          </DrawerHeader>
          {children ? <div className="px-4 text-sm">{children}</div> : null}
          <DrawerFooter>
            <DrawerClose asChild>
              <Button onClick={onAction}>{actionLabel}</Button>
            </DrawerClose>
            <DrawerClose asChild>
              <Button variant="outline">{cancelLabel}</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}