import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { images } from "../../data";
import Button from "../../ui/Button";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function Guidance() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const { psychicReading } = useSelector(selectors.selectAnswers);

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

  return (
    <section className={styles.container}>
      <Title className={styles.title} variant="h2">
        {psychicReading === "yes" && <>{translate("/guidance.title_1")}</>}
        {psychicReading === "no" && <>{translate("/guidance.title_2")}</>}
      </Title>
      <p className={styles.text}>
        {psychicReading === "yes" && <>{translate("/guidance.text_1")}</>}
        {psychicReading === "no" && <>{translate("/guidance.text_2")}</>}
      </p>
      <ul className={styles.list}>
        <svg
          width="312"
          height="297"
          viewBox="0 0 312 297"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="157"
            y1="-2.18557e-8"
            x2="157"
            y2="143"
            stroke="currentColor"
            strokeDasharray="8 9"
          ></line>
          <line
            x1="157"
            y1="155"
            x2="157"
            y2="297"
            stroke="currentColor"
            strokeDasharray="8 8"
          ></line>
          <line
            x1="0.5"
            y1="148.5"
            x2="150.5"
            y2="148.5"
            stroke="currentColor"
            strokeDasharray="8 8"
          ></line>
          <line
            x1="163.5"
            y1="148.5"
            x2="311.5"
            y2="148.5"
            stroke="currentColor"
            strokeDasharray="8 8"
          ></line>
        </svg>
        <li className={styles.item}>
          <img
            src={images("LoveRelationship.webp")}
            alt="Love &amp; Relationship"
            width="143"
            height="105"
          />
          <p className={styles.label}>
            {translate("/guidance.love_relationship")}
          </p>
        </li>
        <li className={styles.item}>
          <img
            src={images("GuidanceLifePath.webp")}
            alt="Guidance &amp; Life path"
            width="143"
            height="105"
          />
          <p className={styles.label}>{translate("/guidance.guidance_live")}</p>
        </li>
        <li className={styles.item}>
          <img
            src={images("CareerWork.webp")}
            alt="Career &amp; Work"
            width="143"
            height="105"
          />
          <p className={styles.label}>{translate("/guidance.career_work")}</p>
        </li>
        <li className={styles.item}>
          <img
            src={images("FutureTelling.webp")}
            alt="Future telling"
            width="143"
            height="105"
          />
          <p className={styles.label}>
            {translate("/guidance.future_telling")}
          </p>
        </li>
      </ul>
      <Button classNameContainer={styles.button} onClick={handleNext}>
        {translate("continue")}
      </Button>
    </section>
  );
}

export default Guidance;
