import Button from "../button/button";
import useSteps, {
  RelationshipStatusChoice,
} from "../../../hooks/palmistry/use-steps";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

export default function StepRelationshipStatus() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV0);
  const steps = useSteps();

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

  return (
    <>
      <div className="palmistry-container__title-wrapper">
        <h3>
          {translate("/relationship-status.title")}
        </h3>
      </div>

      <div className="palmistry-container__button-wrapper">
        <Button
          type="button"
          active={steps.storedValue === RelationshipStatusChoice.Single}
          onClick={() => onNext(RelationshipStatusChoice.Single)}
        >
          {translate("/relationship-status.answer1")}
        </Button>

        <Button
          type="button"
          active={steps.storedValue === RelationshipStatusChoice.InRelationship}
          onClick={() => onNext(RelationshipStatusChoice.InRelationship)}
        >
          {translate("/relationship-status.answer2")}
        </Button>
      </div>
    </>
  );
}
