import clsx from "clsx";

interface MCOptionProps {
    id: string;
    options: {
        A: string;
        B: string;
        C: string;
        D: string;
    };
    selectedOption?: string;
    onSelect: (option: string) => void;
    isEditMode?: boolean;
    onEdit?: (key: 'A' | 'B' | 'C' | 'D', value: string) => void;
    onRemove?: () => void;
}

const MCOption: React.FC<MCOptionProps> = ({
    id,
    options,
    selectedOption,
    onSelect,
    isEditMode,
    onEdit,
}) => {
    const optionKeys = ['A', 'B', 'C', 'D'] as const;

    return (
        <div className="w-full">
            <div className="flex items-center justify-between mb-2">
                <span className="font-medium">Question {id}</span>
            </div>
            <div className="grid grid-cols-2 gap-2">
                {optionKeys.map((key) => (
                    <div key={key} className="flex gap-2">
                        {isEditMode ? (
                            <div className="flex-1 flex items-center gap-2 p-2 rounded-md border border-gray-200">
                                <span className="font-medium min-w-[24px] text-center">{key}</span>
                                <input
                                    type="text"
                                    value={options[key]}
                                    onChange={(e) => onEdit?.(key, e.target.value)}
                                    className="w-full focus:outline-none"
                                />
                            </div>
                        ) : (
                            <button
                                onClick={() => onSelect(key)}
                                className={clsx(
                                    "flex-1 flex items-center gap-2 p-2 rounded-md border transition-colors text-left",
                                    selectedOption === key
                                        ? "border-blue-500 bg-blue-100"
                                        : "border-gray-200 hover:bg-blue-50"
                                )}
                            >
                                <span className="font-medium min-w-[24px] text-center">{key}</span>
                                <span>{options[key]}</span>
                            </button>
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default MCOption;
