import { ReactNode, FormEvent } from "react";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

interface FormModalProps {
    isOpen: boolean;
    onClose: () => void;
    title: string;
    description?: string;
    icon?: ReactNode;
    onSubmit: (e: FormEvent) => void;
    isProcessing?: boolean;
    submitText?: string;
    children: ReactNode;
}

export function FormModal({
    isOpen,
    onClose,
    title,
    description,
    icon,
    onSubmit,
    isProcessing = false,
    submitText = "Simpan",
    children,
}: FormModalProps) {
    return (
        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <DialogContent className="sm:max-w-130 rounded-xl">
                <DialogHeader>
                    <DialogTitle className="text-xl font-bold text-foreground flex items-center gap-2">
                        {icon}
                        {title}
                    </DialogTitle>
                    {description && (
                        <DialogDescription className="text-muted-foreground">
                            {description}
                        </DialogDescription>
                    )}
                </DialogHeader>
                <form onSubmit={onSubmit} className="space-y-4 py-2">
                    {children}
                    <DialogFooter className="pt-3 gap-2">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={onClose}
                        >
                            Batal
                        </Button>
                        <Button
                            type="submit"
                            disabled={isProcessing}
                            className="bg-indigo-600 hover:bg-indigo-500 text-white font-medium"
                        >
                            {isProcessing ? "Menyimpan..." : submitText}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}