import { cn } from '@/lib/utils';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
import { X } from 'lucide-react';
import { ReactNode } from 'react';

/** Bottom sheet on mobile, right drawer on >= sm. */
export function Sheet({ open, onClose, title, children, footer, className }: { open: boolean; onClose: () => void; title: string; children: ReactNode; footer?: ReactNode; className?: string }) {
    return (
        <Transition show={open}>
            <Dialog onClose={onClose} className="relative z-50">
                <TransitionChild enter="duration-200 ease-out" enterFrom="opacity-0" enterTo="opacity-100" leave="duration-150 ease-in" leaveFrom="opacity-100" leaveTo="opacity-0">
                    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" aria-hidden />
                </TransitionChild>
                <div className="fixed inset-0 flex items-end justify-end sm:items-stretch">
                    <TransitionChild
                        enter="duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
                        enterFrom="translate-y-full sm:translate-y-0 sm:translate-x-full"
                        enterTo="translate-y-0 sm:translate-x-0"
                        leave="duration-200 ease-in"
                        leaveFrom="translate-y-0 sm:translate-x-0"
                        leaveTo="translate-y-full sm:translate-y-0 sm:translate-x-full"
                    >
                        <DialogPanel className={cn('flex max-h-[88dvh] w-full flex-col rounded-t-2xl border border-border bg-popover text-popover-foreground shadow-lift sm:max-h-none sm:w-[400px] sm:rounded-none sm:rounded-l-2xl', className)}>
                            <div className="flex items-center justify-between border-b border-border px-5 py-4">
                                <DialogTitle className="text-h3">{title}</DialogTitle>
                                <button onClick={onClose} aria-label="Close" className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"><X className="size-4" /></button>
                            </div>
                            <div className="flex-1 overflow-y-auto px-5 py-4">{children}</div>
                            {footer && <div className="border-t border-border px-5 py-3">{footer}</div>}
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </Dialog>
        </Transition>
    );
}