import { useNavigate } from "react-router-dom";
import { useUpdateStep } from "@/components/ChatsPath/hooks/useUpdateStep";
import routes from "@/routes";
import { IAnswer } from "@/components/ChatsPath/data";
import Answers from "@/components/ChatsPath/components/Answers";

function NeedGuidance() {
  useUpdateStep(17);
  const navigate = useNavigate();

  const handleNext = () => {
    navigate(routes.client.chatsQuizDecisionGuidance());
  };

  const answers: IAnswer[] = [
    {
      id: 1,
      value: "no",
      name: "No",
      questionId: "needGuidance",
      onClick: handleNext,
    },
    {
      id: 2,
      value: "yes",
      name: "Yes",
      questionId: "needGuidance",
      onClick: handleNext,
    },
    {
      id: 3,
      value: "not_sure",
      name: "Not sure",
      questionId: "needGuidance",
      onClick: handleNext,
    },
  ];

  return (
    <>
      <h2 className={`chats-answers-title`}>
        Do you struggle with questions that deal with uncertainty?
      </h2>
      <Answers answers={answers} />
    </>
  );
}

export default NeedGuidance;