import drinkIcon from '/src/images/registration/drink.png';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../app/store';
import { updateFormFields, updateStep3DataToAPI } from '../../app/reducers/registrationstep3';

export default function PartnerDrink() {
    const registrationstep3 = useSelector((state: RootState) => state.registrationstep3);
    const dispatch = useDispatch<AppDispatch>();
    const drinkingOptions = ['Yes', 'No'];
    
    const handleOptionSelect = (option: string) => {
        dispatch(updateFormFields({
            ['drink']: option
          }));
        
          dispatch(updateStep3DataToAPI({
                fieldName: 'drink',
                value: {drinking: option}
            }));
    };
    
    return (
        <div className="p-6 bg-white rounded-lg shadow-sm">
            <div className="flex flex-col items-center mb-6">
                <div className="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center mb-4">
                    <img src={drinkIcon} alt="Drink" className="w-32 h-32" />
                </div>
                <h2 className="text-2xl font-bold text-gray-800">Drink</h2>
            </div>
            
            <div className="mt-8 space-y-4">
                {drinkingOptions.map((option) => (
                    <div
                        key={option}
                        className={`py-3 px-4 border rounded-lg flex items-center justify-center cursor-pointer ${
                            registrationstep3.formFields.drink.value === option 
                                ? 'border-primary text-primary' 
                                : 'border-gray-300 text-gray-700'
                        }`}
                        onClick={() => handleOptionSelect(option)}
                    >
                        <span className="text-center">{option}</span>
                    </div>
                ))}
            </div>
        </div>
    );
}