incr/resources/js/components/Display/InlineForm.tsx

import AddEntryForm from '@/components/Transactions/AddEntryForm';
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import { cn } from '@/lib/utils';

type FormType = 'purchase' | 'milestone';

interface InlineFormProps {
    type: FormType | null;
    unit?: string;
    onClose: () => void;
    onSuccess?: (type: FormType) => void;
    className?: string;
}

export default function InlineForm({
    type,
    unit = 'units',
    onClose,
    onSuccess,
    className,
}: InlineFormProps) {
    if (!type) return null;

    const handleSuccess = () => {
        if (onSuccess) onSuccess(type);
        onClose();
    };

    return (
        <div
            className={cn(
                'bg-black p-8',
                'transition-all duration-300',
                className,
            )}
        >
            <div className="w-full border-4 border-red-500 p-2 bg-black space-y-4 glow-red">
                <div className="flex justify-center">
                    {type === 'purchase' ? (
                        <AddEntryForm
                            unit={unit}
                            onSuccess={handleSuccess}
                            onCancel={onClose}
                        />
                    ) : (
                        <AddMilestoneForm
                            onSuccess={handleSuccess}
                            onCancel={onClose}
                        />
                    )}
                </div>
            </div>
        </div>
    );
}