import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { images } from "../../data";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";

interface IChooseGenderProps {
  onSelectGender?: (gender: string) => void;
}

function ChooseGender({ onSelectGender }: IChooseGenderProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const dispatch = useDispatch();

  const selectGender = (gender: string) => {
    dispatch(actions.questionnaire.update({ gender }));
    onSelectGender && onSelectGender(gender);
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <Title variant="h2" className={styles.title}>
          {translate("/welcome.choose_gender")}
        </Title>
        <ul className={styles.list}>
          <li className={styles.item}>
            <div className={styles["button-wrapper"]}>
              <button type="button" onClick={() => selectGender("male")}>
                <span className={styles["button-label"]}>
                  <img
                    alt="male"
                    width="315"
                    height="450"
                    className={styles.image}
                    src={images("male.webp")}
                    style={{ color: "transparent" }}
                  />
                </span>
              </button>
            </div>
          </li>
          <li className={styles.item}>
            <div className={styles["button-wrapper"]}>
              <button type="button" onClick={() => selectGender("female")}>
                <span className={styles["button-label"]}>
                  <img
                    alt="female"
                    width="315"
                    height="450"
                    className={styles.image}
                    src={images("female.webp")}
                    style={{ color: "transparent" }}
                  />
                </span>
              </button>
            </div>
          </li>
        </ul>
        <p className={styles.description}>{translate("/welcome.text_2")}</p>
      </div>
    </div>
  );
}

export default ChooseGender;
