import React from 'react';
import { Dialog } from '@headlessui/react';
import { Cancel01Icon } from '../Icons';
import Button from './Button';

const Modal = ({
    isOpen = true,
    onClose,
    title,
    children,
    footer,
    size = 'lg',
    closable = true
}) => {
    const sizeClasses = {
        sm: 'max-w-md',
        md: 'max-w-lg',
        lg: 'max-w-2xl',
        xl: 'max-w-4xl',
        full: 'max-w-7xl'
    };

    return (
        <Dialog 
            open={isOpen} 
            onClose={closable ? onClose : () => {}}
            className="relative z-50"
        >
            {/* Backdrop */}
            <div className="fixed inset-0 bg-black/35 backdrop-blur-[2px]" aria-hidden="true" />

            {/* Container */}
            <div className="fixed inset-0 flex items-center justify-center p-4">
                <Dialog.Panel 
                    className={`
                        w-full ${sizeClasses[size]}
                        bg-white dark:bg-neutral-900
                        border border-neutral-200 dark:border-neutral-800
                        rounded-lg
                        shadow-xl 
                        max-h-[90vh] 
                        overflow-hidden
                        flex flex-col
                    `}
                >
                    {/* Header */}
                    <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
                        <Dialog.Title className="text-sm font-medium text-neutral-900 dark:text-white">
                            {title}
                        </Dialog.Title>
                        {closable && (
                            <Button
                                variant="ghost"
                                size="sm"
                                onClick={onClose}
                                icon={<Cancel01Icon className="w-4 h-4" />}
                                className="!p-1 -mr-1"
                            />
                        )}
                    </div>

                    {/* Content */}
                    <div className="flex-1 overflow-y-auto p-4">
                        {children}
                    </div>

                    {/* Footer */}
                    {footer && (
                        <div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/30">
                            {footer}
                        </div>
                    )}
                </Dialog.Panel>
            </div>
        </Dialog>
    );
};

export default Modal; 