import { ReactNode } from 'react';
import { Modal } from '@heroui/react';
import { EyeIcon } from '@heroicons/react/24/solid';

interface DetailModalProps {
    isOpen: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    children: ReactNode;
    footer?: ReactNode;
}

export function DetailModal({ isOpen, onOpenChange, title, children, footer }: DetailModalProps) {
    return (
        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
            <Modal.Backdrop>
                <Modal.Container>
                    <Modal.Dialog className="max-w-2xl w-full bg-gray-50">
                        <Modal.Header className="flex-row! items-center gap-3 pb-3 mb-2 border-b border-gray-200">
                            <Modal.Icon className="bg-sky-100 text-sky-600">
                                <EyeIcon className="w-5 h-5" />
                            </Modal.Icon>
                            <Modal.Heading>{title}</Modal.Heading>
                        </Modal.Header>
                        <Modal.CloseTrigger />
                        <Modal.Body>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[60vh] overflow-y-auto pl-2 pr-3 py-1">
                                {children}
                            </div>
                        </Modal.Body>
                        {footer && <Modal.Footer className="border-t border-gray-200 pt-3 mt-2">{footer}</Modal.Footer>}
                    </Modal.Dialog>
                </Modal.Container>
            </Modal.Backdrop>
        </Modal>
    );
}

export function DetailRow({ label, value, span2 }: { label: string; value: ReactNode; span2?: boolean }) {
    return (
        <div className={`flex flex-col gap-1 ${span2 ? 'sm:col-span-2' : ''}`}>
            <span className="text-sm font-bold text-gray-800">{label}</span>
            <div className="text-sm text-gray-600">
                {value ?? <span className="text-gray-300">-</span>}
            </div>
        </div>
    );
}