import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

import Title from "@/components/Title";
import PrivacyPolicy from "@/components/pages/ABDesign/v1/components/PrivacyPolicy";
import Button from "../../components/Button";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";

function CompatibilityTestPage() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const navigate = useNavigate();

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

  return (
    <div className={styles.container}>
      <Title variant="h2" className={styles.title}>
        {translate("/compatibility-test.title", {
          br: <br />,
        })}
      </Title>
      <ul className={styles.points}>
        {Array.from({ length: 5 }).map((_, index) => (
          <li key={index}>
            {translate(`/compatibility-test.points.point${index + 1}`)}
          </li>
        ))}
      </ul>
      {/* <ChooseGender onSelectGender={selectGender} /> */}
      {/* <div className={styles["genders-container"]}>
        {localGenders.map((_gender, index) => (
          <Answer
            key={index}
            answer={_gender}
            isSelected={gender === _gender.id}
            onClick={() =>
              selectGender(genders.find((g) => g.id === _gender.id) ?? null)
            }
          />
        ))}
      </div> */}
      <Button className={styles.button} onClick={handleNext}>
        {translate("/compatibility-test.button")}
      </Button>
      <PrivacyPolicy
        containerClassName={styles["privacy-policy"]}
        haveCheckbox={false}
      />
    </div>
  );
}

export default CompatibilityTestPage;
