"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 } from "react";
import Footer from "./components/Footer";

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

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

  const ages = [
    {
      title: "5+",
      start: 5,
      end: 12,
    },
    {
      title: "13+",
      start: 13,
      end: 17,
    },
    {
      title: "18+",
      start: 18,
      end: 100,
    },
  ];

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

  return (
    <>
      <div className="flex flex-col gap-4 text-center">
        <h1 className="text-[32px] text-dark-500 font-semibold capitalize cursor-default">
          {t("help us get to know you")}
        </h1>

        <h3 className="text-xs font-normal text-dark-300 cursor-default">
          {firstWordCapital(
            t("the choice of age will be used to personalize the experience")
          )}
          .
        </h3>
      </div>

      <div className="grid grid-rows-2 gap-3">
        {ages.map((item, index) => (
          <OptionButton
            key={index}
            onClick={() =>
              setSelected(prev => ({
                ...prev,
                ageRange: item
              }))
            }
            selected={selected.ageRange?.title === item.title}
          >
            {item.title}
          </OptionButton>
        ))}
      </div>

      <Button
        text={t("continue")}
        disabled={!selected.ageRange}
        onClick={submitAge}
      />
      <Footer />
    </>
  );
};

export default Age;