import { IAnswer, aboutUsAnswers } from "@/data";
import styles from "./styles.module.css";
import Title from "@/components/Title";
import Answer from "@/components/Answer";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";

function AboutUsPage() {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleClick = (answer: IAnswer) => {
    dispatch(
      actions.questionnaire.update({
        aboutUs: answer.id,
      })
    );
    navigate(routes.client.loadingProfile());
  };

  return (
    <div className={`${styles.page} page`}>
      <Title className={styles.title} variant="h1">
        Where did you hear about us?
      </Title>

      <div className={styles["answers-container"]}>
        {aboutUsAnswers['aboutUsAnswersNormal'].map((answer, index) => (
          <Answer
            classNameContainer={styles["answer-container"]}
            key={index}
            answer={answer}
            type="only-text-single"
            onClick={() => handleClick(answer)}
          />
        ))}
      </div>
    </div>
  );
}

export default AboutUsPage;