"use client";

import RoundedButton from "@/components/elements/RoundedButton";
import { toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

interface AgeSelectionProps {
  selectedAge: string;
  setSelectedAge: (age: string) => void;
  setFieldValue: (field: string, value: string) => void;
}

const AgeSelection = ({ selectedAge, setSelectedAge, setFieldValue }: AgeSelectionProps) => {
  const { t } = useTranslation("common");

  const getAgeLabel = (age: string) => {
    if (age === "all") return t("filters.noAgeLimit");
    return t("filters.yearsOld", { range: age });
  };

  return (
    <div className="flex gap-2">
      {["18-25", "25-30", "all"].map((age) => (
        <RoundedButton
          key={age}
          className={cn(
            toggleBtnClass(selectedAge === age),
            "min-w-24 px-2 py-1 text-xs"
          )}
          onClick={(e) => {
            e.preventDefault();
            setSelectedAge(age);
            setFieldValue("age", age);
          }}
        >
          {getAgeLabel(age)}
        </RoundedButton>
      ))}
    </div>
  );
};

export default AgeSelection;
