import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import { cn } from '@/lib/utils';
import { X } from 'lucide-react';

interface InlineFormProps {
    type: 'purchase' | 'milestone' | null;
    onClose: () => void;
    onPurchaseSuccess?: () => void;
    onMilestoneSuccess?: () => void;
    className?: string;
}

export default function InlineForm({ 
    type, 
    onClose, 
    onPurchaseSuccess,
    onMilestoneSuccess,
    className 
}: InlineFormProps) {
    if (!type) return null;

    const title = type === 'purchase' ? 'ADD PURCHASE' : 'ADD MILESTONE';

    return (
        <div 
            className={cn(
                "bg-black border-4 border-gray-800 rounded-lg",
                "shadow-2xl shadow-red-500/20",
                "p-6",
                className
            )}
        >
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
                <h2 className="text-red-500 font-mono tracking-wide text-lg">
                    {title}
                </h2>
                <button
                    onClick={onClose}
                    className="text-red-400 hover:text-red-300 transition-colors p-1"
                    aria-label="Close form"
                >
                    <X className="w-5 h-5" />
                </button>
            </div>

            {/* Form Content */}
            <div className="flex justify-center">
                {type === 'purchase' ? (
                    <AddPurchaseForm 
                        onSuccess={() => {
                            if (onPurchaseSuccess) onPurchaseSuccess();
                            onClose();
                        }} 
                    />
                ) : (
                    <AddMilestoneForm 
                        onSuccess={() => {
                            if (onMilestoneSuccess) onMilestoneSuccess();
                            onClose();
                        }} 
                    />
                )}
            </div>
        </div>
    );
}