import React from 'react';

interface FigmaMultipleChoiceProps {
    options: string[];
    selectedValue?: string;
    onSelect?: (value: string) => void;
    className?: string;
}

export const FigmaMultipleChoice: React.FC<FigmaMultipleChoiceProps> = ({
    options,
    selectedValue,
    onSelect,
    className = ""
}) => {
    return (
        <div className={`self-stretch inline-flex justify-center items-center gap-3 ${className}`}>
            {options.map((option, index) => {
                const isSelected = selectedValue === option;
                return (
                    <div
                        key={index}
                        className={`flex-1 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${isSelected
                                ? 'bg-Neutrals-NeutralSlate800'
                                : 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
                            }`}
                        onClick={() => onSelect?.(option)}
                    >
                        <div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${isSelected
                                ? 'text-Neutrals-NeutralSlate0'
                                : 'text-Neutrals-NeutralSlate950'
                            }`}>
                            {option}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default FigmaMultipleChoice;