import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
export const Sheet = DialogPrimitive.Root
export const SheetTrigger = DialogPrimitive.Trigger
export const SheetClose = DialogPrimitive.Close
export function SheetContent({ side = 'right', className, children, ...props }: DialogPrimitive.DialogContentProps & { side?: 'left'|'right' }) {
  return <DialogPrimitive.Portal><DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-foreground/35 backdrop-blur-[1px]"/><DialogPrimitive.Content className={cn('fixed inset-y-0 z-50 w-[92vw] max-w-md border bg-background p-5 shadow-xl', side === 'right' ? 'right-0 border-l' : 'left-0 border-r', className)} {...props}>{children}<DialogPrimitive.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground hover:bg-accent"><X className="size-4"/></DialogPrimitive.Close></DialogPrimitive.Content></DialogPrimitive.Portal>
}
export const SheetTitle = DialogPrimitive.Title
export const SheetDescription = DialogPrimitive.Description