import { useDispatch, useSelector } from 'react-redux';
import { updateFieldAndSaveToAPI, updateFormFields } from '../../app/reducers/registrationstep1';
import { AppDispatch, RootState } from '../../app/store';

export default function Drink() {
  const registrationstep1 = useSelector((state: RootState) => state.registrationstep1);
    const dispatch = useDispatch<AppDispatch>();

  const handleOptionSelect = (option: string) => {
    dispatch(updateFormFields({
        ['drink']: option
      }));
      dispatch(updateFieldAndSaveToAPI({ fieldName: 'drink', value: {drink: option} }));
  };

  return (
    <div className="flex flex-col bg-white">
      {/* Drink icon */}
      <div className="flex justify-center mt-4">
        <div className="w-32 h-32 rounded-full flex items-center justify-center">
          <img 
            src="/src/images/registration/drink.png" 
            alt="Drink" 
            className="w-32 h-32"
          />
        </div>
      </div>

      {/* Title */}
      <div className="mt-6 px-6">
        <h1 className="text-2xl font-bold text-center">Drink</h1>
      </div>

      {/* Options */}
      <div className="mt-12 px-6 space-y-4">
        <button
          className={`w-full py-3 border border-gray-300 rounded-md ${
            registrationstep1.formFields.drink.value === 'Drinks' ? 'bg-primary text-white border-primary' : ''
          }`}
          onClick={() => handleOptionSelect('Drinks')}
        >
          Drinks
        </button>
        
        <button
          className={`w-full py-3 border border-gray-300 rounded-md ${
            registrationstep1.formFields.drink.value === 'Doesn\'t drink' ? 'bg-primary text-white border-primary' : ''
          }`}
          onClick={() => handleOptionSelect('Doesn\'t drink')}
        >
          Doesn't drink
        </button>
      </div>
    </div>
  );
}