import { Dialog, Transition, TransitionChild } from '@headlessui/react';
import { Fragment, ReactNode } from 'react';

interface ModalProps {
    open: boolean;
    onClose: () => void;

    title?: string;
    children?: ReactNode;

    footer?: ReactNode;

    animation?: 'slideDown' | 'scale' | 'none';
    maxWidth?: string;
}

const Modal = ({
    open,
    onClose,
    title,
    children,
    footer,
    animation = 'scale',
    maxWidth = 'max-w-lg',
}: ModalProps) => {

    const getAnimationClass = () => {
        switch (animation) {
            case 'slideDown':
                return 'animate__animated animate__slideInDown';
            case 'scale':
                return '';
            default:
                return '';
        }
    };

    return (
        <Transition appear show={open} as={Fragment}>
            <Dialog as="div" open={open} onClose={onClose} className="relative z-[9999]">

                {/* Overlay */}
                <TransitionChild
                    as={Fragment}
                    enter="ease-out duration-300"
                    enterFrom="opacity-0"
                    enterTo="opacity-100"
                    leave="ease-in duration-200"
                    leaveFrom="opacity-100"
                    leaveTo="opacity-0"
                >
                   <div className="fixed inset-0 bg-black/60 z-[9998]" />
                </TransitionChild>

                <div className="fixed inset-0 z-[9999] overflow-y-auto">
                    <div className="flex min-h-screen items-start justify-center px-4">

                        <TransitionChild
                            as={Fragment}
                            enter="ease-out duration-300"
                            enterFrom="opacity-0 scale-95"
                            enterTo="opacity-100 scale-100"
                            leave="ease-in duration-200"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95"
                        >
                            <Dialog.Panel
                                className={`panel my-8 w-full ${maxWidth} overflow-hidden rounded-lg border-0 p-0 text-black dark:text-white-dark ${getAnimationClass()}`}
                            >

                                {/* Header */}
                                {title && (
                                    <div className="flex items-center justify-between bg-[#fbfbfb] px-5 py-3 dark:bg-[#121c2c]">
                                        <h5 className="text-lg font-bold">{title}</h5>

                                        <button onClick={onClose} className="text-white-dark hover:text-dark">
                                            ✕
                                        </button>
                                    </div>
                                )}

                                {/* Body */}
                                <div className="p-5">
                                    {children}
                                </div>

                                {/* Footer */}
                                {footer && (
                                    <div className="px-5 pb-5 flex justify-end gap-2">
                                        {footer}
                                    </div>
                                )}

                            </Dialog.Panel>
                        </TransitionChild>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
};

export default Modal;