import Button from "../button/button";
import useSteps, { GenderChoice } from "../../../hooks/palmistry/use-steps";
import { useDispatch } from "react-redux";
import { actions } from "@/store";

export default function StepGender() {
  const steps = useSteps();
  const dispatch = useDispatch();

  const onNext = (choice: GenderChoice) => {
    dispatch(actions.questionnaire.update({ gender: choice }));
    steps.saveCurrent(choice);
    steps.goNext(choice);
  };

  return (
    <>
      <h3 className="palmistry-container__header">What’s your gender?</h3>

      <p className="palmistry-container__description">
        In Palmistry, everyone is a blend of masculine and feminine, so it helps
        to know yours.
      </p>

      <div className="palmistry-container__button-wrapper">
        <Button
          type="button"
          active={steps.storedValue === GenderChoice.Male}
          onClick={() => onNext(GenderChoice.Male)}
        >
          Male
        </Button>

        <Button
          type="button"
          active={steps.storedValue === GenderChoice.Female}
          onClick={() => onNext(GenderChoice.Female)}
        >
          Female
        </Button>
      </div>
    </>
  );
}