import Title from "@/components/Title"
import styles from "../../styles.module.scss"
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import PrivacyPolicy from "@/components/pages/ABDesign/v1/components/PrivacyPolicy";
import { Gender } from "@/data";
import { genders } from "@/components/pages/ABDesign/v1/data/genders";
import Answer from "@/components/CompatibilityV4/components/Answer";
import AlreadyHaveAccount from "@/components/ui/AlreadyHaveAccount";

interface IGenderV2Props {
    localGenders: Array<{
        id: string;
        title: React.ReactNode | string;
    }>;
    gender: string;
    selectGender: (gender: Gender | null) => void;
}

function GenderV2({ localGenders, gender, selectGender }: IGenderV2Props) {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);

    return (
        <>
            <Title variant="h2" className={styles.title}>
                {translate("/gender.v2.title", {
                    br: <br />,
                })}
            </Title>
            <ul className={styles.points}>
                {Array.from({ length: 5 }).map((_, index) => (
                    <li key={index}>
                        {translate(`/gender.v2.points.point${index + 1}`)}
                    </li>
                ))}
            </ul>
            <p
                className={styles.subtitle}
                style={{
                    marginTop: "28px",
                }}
            >{translate("/gender.v2.subtitle", {
                br: <br />,
            })}</p>
            {/* <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>
            <PrivacyPolicy containerClassName={styles["privacy-policy"]} haveCheckbox={false} />
            <AlreadyHaveAccount text={translate("/gender.already_have_account")} />
            {/* {gender && !privacyPolicyChecked && (
            <Toast classNameContainer={styles["toast-container"]} variant="error">
              {translate("/gender.toast", undefined, ELocalesPlacement.V1)}
            </Toast>
          )} */}
        </>
    )
}

export default GenderV2