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

import type { ReactNode } from 'react'

import { cn } from '@evobgp/ui/lib/utils'
import { FieldGroup } from '@evobgp/ui/components/field'
import { ScrollArea } from '@evobgp/ui/components/scroll-area'
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) + FieldGroup (form-7).
 * @see https://reui.io/preview/base/sheet-8
 * @see https://reui.io/preview/base/form-7
 */
export function FormDrawer({
  open,
  onOpenChange,
  title,
  description,
  children,
  footer,
  className,
}: FormDrawerProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        className={cn('flex w-full flex-col 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="min-h-0 flex-1 overflow-hidden">
          <ScrollArea className="h-full">
            <FieldGroup className="p-4">{children}</FieldGroup>
          </ScrollArea>
        </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>
  )
}