import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";

export type ViewDetailSchema<T> = {
    label: string;
    render: (item: T) => React.ReactNode;
};

interface DynamicViewDialogProps<T> {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    data: T | null;
    schema: ViewDetailSchema<T>[];
}

export function DynamicViewDialog<T>({
    open,
    onOpenChange,
    title,
    data,
    schema,
}: DynamicViewDialogProps<T>) {
    if (!data) return null;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md rounded-2xl">
                <DialogHeader>
                    <DialogTitle className="text-xl font-bold text-foreground">
                        Detail {title}
                    </DialogTitle>
                </DialogHeader>

                <div className="space-y-3 py-2 text-sm">
                    {schema.map((item, index) => (
                        <div
                            key={index}
                            className="flex justify-between items-center border-b pb-2"
                        >
                            <span className="text-muted-foreground">
                                {item.label}:
                            </span>
                            <span className="font-semibold text-foreground">
                                {item.render(data)}
                            </span>
                        </div>
                    ))}
                </div>
            </DialogContent>
        </Dialog>
    );
}