import Button from '../button/button';
import useSteps, { DecisionsChoice } from '../../../hooks/palmistry/use-steps';

export default function StepDecisions() {
  const steps = useSteps();

  const onNext = (choice: DecisionsChoice) => {
    steps.saveCurrent(choice);
    steps.goNext(choice);
  };

  return (
    <>
      <div className="palmistry-container__title-wrapper">
        <h3>Do you make decisions with your head or your heart?</h3>
      </div>
      
      <div className="palmistry-container__button-wrapper">
        <Button
          type="button"
          active={steps.storedValue === DecisionsChoice.Heart}
          onClick={() => onNext(DecisionsChoice.Heart)}
        >
          Heart
        </Button>

        <Button
          type="button"
          active={steps.storedValue === DecisionsChoice.Head}
          onClick={() => onNext(DecisionsChoice.Head)}
        >
          Head
        </Button>

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