import type React from "react";

import { Button, Dialog, DialogContent } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { X } from "lucide-react";

interface FullscreenModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  className?: string;
}

export const FullscreenModal = ({
  isOpen,
  onClose,
  title,
  children,
  className,
}: FullscreenModalProps) => {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent
        className={cn(
          "max-w-none max-h-none w-screen h-screen",
          "bg-background border-0 rounded-none p-0",
          "data-[state=open]:animate-in data-[state=closed]:animate-out",
          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
          className
        )}
      >
        {/* Header fijo */}
        <div className='flex items-center justify-between p-6 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
          <h2 className='text-2xl font-semibold tracking-tight'>{title}</h2>
          <Button variant='ghost' size='sm' onClick={onClose} className='h-8 w-8 p-0'>
            <X className='h-4 w-4' />
            <span className='sr-only'>Cerrar</span>
          </Button>
        </div>

        {/* Contenido scrolleable */}
        <div className='flex-1 overflow-auto p-6'>{children}</div>
      </DialogContent>
    </Dialog>
  );
};