'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

    return (
        <div className="fixed inset-0 z-50 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 rounded-2xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto",
                className
            )}>
                {/* Header */}
                {isHeader && (
                    <div className="flex items-center justify-between p-6 border-b border-gray-200">
                        <h2 className="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-6">
                    {children}
                </div>
            </div>
        </div>
    )
}

export default Modal