EvoBGP/apps/web/src/components/form-drawer.tsx

import type { ReactNode } from 'react'

import { cn } from '@evobgp/ui/lib/utils'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from '@evobgp/ui/components/sheet'

interface FormDrawerProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description?: string
  children: ReactNode
  footer: ReactNode
  className?: string
}

/** Create/edit overlay — Sheet DNA (sheet-8 / sheet-1). Preview: https://reui.io/preview/base/sheet-8 */
export function FormDrawer({
  open,
  onOpenChange,
  title,
  description,
  children,
  footer,
  className,
}: FormDrawerProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        className={cn('w-full gap-0 overflow-hidden p-0 sm:max-w-lg', className)}
      >
        <SheetHeader className="shrink-0 border-b border-border/50">
          <SheetTitle>{title}</SheetTitle>
          {description ? <SheetDescription>{description}</SheetDescription> : null}
        </SheetHeader>
        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">{children}</div>
        <SheetFooter className="mt-0 shrink-0 border-t border-border/50 bg-muted/50">
          <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
            {footer}
          </div>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}