import { MdDelete, MdAdd } from "react-icons/md";

interface AlternativeSolutionProps {
    solutions: string[];
    onAdd: () => void;
    onRemove: (index: number) => void;
    onEdit: (index: number, value: string) => void;
}

const AlternativeSolutions: React.FC<AlternativeSolutionProps> = ({
    solutions,
    onAdd,
    onRemove,
    onEdit,
}) => {
    return (
        <div className="space-y-2 mt-4">
            {solutions.map((solution, index) => (
                <div key={index} className="flex items-center gap-2">
                    <input
                        type="text"
                        value={solution}
                        onChange={(e) => onEdit(index, e.target.value)}
                        className="flex-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
                        placeholder={`Solution ${index + 1}`}
                    />
                    <button
                        onClick={() => onRemove(index)}
                        className="p-2 text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                        title="Delete solution"
                    >
                        <MdDelete size={20} />
                    </button>
                </div>
            ))}
            <button
                onClick={onAdd}
                className="w-full mt-2 p-2 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors flex items-center justify-center gap-2 text-gray-600 hover:text-blue-600"
            >
                <MdAdd size={18} />
                Add Alternative Solution
            </button>
        </div>
    );
};

export default AlternativeSolutions;