'use client'
import { FC, ReactNode, useEffect } from 'react'
import { CloseCircle } from 'iconsax-react'
import { cn } from '@/lib/utils'

type Props = {
    open: boolean
    close: () => void
    children: ReactNode
    title?: string
    isHeader?: boolean
    className?: string
}

const Modal: FC<Props> = ({ open, close, children, title, isHeader = false, className }) => {
    useEffect(() => {
        if (open) {
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.overflow = 'unset'
        }

        return () => {
            document.body.style.overflow = 'unset'
        }
    }, [open])

    if (!open) return null

    const isFullScreen = className?.includes('max-w-full') && className?.includes('h-full')

    return (
        <div className={cn(
            "fixed inset-0 z-50",
            isFullScreen ? "flex" : "flex items-center justify-center"
        )}>
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
                onClick={close}
            />

            {/* Modal */}
            <div className={cn(
                "relative bg-white shadow-xl overflow-hidden",
                isFullScreen
                    ? "w-full h-full"
                    : "rounded-xl sm:rounded-2xl max-w-sm sm:max-w-md w-full mx-2 sm:mx-4 max-h-[90vh]",
                className
            )}>
                {/* Header */}
                {isHeader && (
                    <div className="flex items-center justify-between p-4 sm:p-6 border-b border-gray-200">
                        <h2 className="text-base sm:text-lg font-semibold text-gray-900">{title}</h2>
                        <button
                            onClick={close}
                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                        >
                            <CloseCircle size={20} />
                        </button>
                    </div>
                )}

                {/* Content */}
                <div className="p-4 sm:p-6">
                    {children}
                </div>
            </div>
        </div>
    )
}

export default Modal
