"use client";

import Button from "@/components/ui/Button";
import OptionButton from "@/components/ui/OptionButton";
import { useTranslation } from "@/hooks/useTranslation";
import { Onboarding } from "@/models/onboarding";
import { firstWordCapital } from "@/utils/text";
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
import Footer from "./components/Footer";

interface GenderProps {
  nextStep: () => void;
  selected: Onboarding;
  setSelected: (Dispatch<SetStateAction<Onboarding>>);
}

const Gender: React.FC<GenderProps> = ({ nextStep, selected, setSelected }) => {
  const { t } = useTranslation();

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  const genders = ["male", "female"];

  const submitGender = () => {
    nextStep();
  };

  return (
    <>
      <div className="flex flex-col gap-4 text-center">
        <h1 className="text-3xl text-dark-500 font-semibold capitalize">
          {t("Tell us about yourself")}
        </h1>

        <h3 className="text-sm text-dark-300">
          {firstWordCapital(
            t("Gender selection will be used to personalize the experience")
          )}
          .
        </h3>
      </div>

      <div className="grid grid-rows-2 gap-3">
        {genders.map((gender) => (
          <OptionButton
            key={gender}
            selected={selected.sex === gender}
            onClick={() =>
              setSelected(prev => ({
                ...prev,
                sex: gender
              }))
            }
          >
            {t(gender)}
          </OptionButton>
        ))}
      </div>

      <Button
        text={t("continue")}
        disabled={selected.sex === ""}
        onClick={submitGender}
      />

      <Footer />
    </>
  );
};

export default Gender;