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;