import { useLanguage } from "@/app/context/LanguageContext";

interface Props {
  value: string;
  onChange: (value: string) => void;
}

export default function GenderSelector({
  value,
  onChange,
}: Props) {
  const { t } = useLanguage();

  const genders = [
    { value: "Male", label: t("auth.gender.male", "Male") },
    { value: "Female", label: t("auth.gender.female", "Female") },
  ];

  return (
    <div className="d-flex gap-2">

      {genders.map((gender) => (

        <button
          key={gender.value}
          type="button"
          className={
            value === gender.value
              ? "gender-btn active"
              : "gender-btn"
          }
          onClick={() => onChange(gender.value)}
        >
          {gender.label}
        </button>

      ))}

    </div>
  );
}