import type { ReactNode } from 'react'

import { cn } from '@/lib'

type ModalProps = {
    open: boolean
    title?: ReactNode
    children: ReactNode
    footer?: ReactNode
    onClose?: () => void
    closeOnOverlayClick?: boolean
    className?: string
    bodyClassName?: string
}

export function Modal({
    open,
    title,
    children,
    footer,
    onClose,
    closeOnOverlayClick = true,
    className,
    bodyClassName,
}: ModalProps) {
    if (!open) {
        return null
    }

    const handleOverlayClick = () => {
        if (closeOnOverlayClick) {
            onClose?.()
        }
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-[16px]">
            <button
                type="button"
                aria-label="Close modal"
                className="absolute inset-0 bg-[#050409]/65 backdrop-blur-[6px]"
                onClick={handleOverlayClick}
            />

            <div
                role="dialog"
                aria-modal="true"
                className={cn(
                    'relative z-10 w-full max-w-[560px] overflow-hidden rounded-[14px] shadow-[0_18px_60px_rgba(0,0,0,0.45)]',
                    className,
                )}
            >
                <div className="flex min-h-[58px] items-center justify-between bg-linear-to-r from-[#F96C02] to-[#FE9F00] px-[18px] py-[14px] text-white">
                    <div className="text-[18px] leading-[1.2] font-bold">{title}</div>
                    {onClose ? (
                        <button
                            type="button"
                            className="flex h-[30px] w-[30px] items-center justify-center rounded-full bg-black/15 text-[18px] leading-none text-white transition-colors hover:bg-black/25"
                            onClick={onClose}
                        >
                            ×
                        </button>
                    ) : null}
                </div>

                <div className="liquid-glass-bg !rounded-t-none bg-[#08070E]/75">
                    <div className={cn('px-[20px] py-[20px] text-white', bodyClassName)}>{children}</div>
                    {footer ? (
                        <div className="flex items-center justify-end gap-[10px] px-[20px] pb-[20px]">
                            {footer}
                        </div>
                    ) : null}
                </div>
            </div>
        </div>
    )
}

export default Modal
