"use client";

import RoundedButton from "@/components/elements/RoundedButton";
import Image from "next/image";
import { toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import {
  PROJECT_TOGGLE_BTN,
  PROJECT_TOGGLE_ROW,
} from "@/lib/projectFormStyles";
import { useTranslation } from "react-i18next";

interface GenderSelectionProps {
  selectedGender: string;
  setSelectedGender: (gender: string) => void;
  setFieldValue: (field: string, value: string) => void;
}

const GenderSelection = ({
  selectedGender,
  setSelectedGender,
  setFieldValue,
}: GenderSelectionProps) => {
  const { t } = useTranslation("common");

  const pick = (gender: string) => {
    setSelectedGender(gender);
    setFieldValue("gender", gender);
  };

  return (
    <div className={cn(PROJECT_TOGGLE_ROW, "grid-cols-3")}>
      <RoundedButton
        type="button"
        className={cn(
          toggleBtnClass(selectedGender === "female"),
          PROJECT_TOGGLE_BTN,
          "max-w-none"
        )}
        onClick={(e) => {
          e.preventDefault();
          pick("female");
        }}
      >
        {t("auth.female")}
        <Image
          src="/images/icons/woman.svg"
          width={20}
          height={20}
          alt=""
          className="dark:invert"
        />
      </RoundedButton>
      <RoundedButton
        type="button"
        className={cn(
          toggleBtnClass(selectedGender === "male"),
          PROJECT_TOGGLE_BTN,
          "max-w-none"
        )}
        onClick={(e) => {
          e.preventDefault();
          pick("male");
        }}
      >
        {t("auth.male")}
        <Image
          src="/images/icons/man.svg"
          width={20}
          height={20}
          alt=""
          className="dark:invert"
        />
      </RoundedButton>
      <RoundedButton
        type="button"
        className={cn(
          toggleBtnClass(selectedGender === "any"),
          PROJECT_TOGGLE_BTN,
          "max-w-none"
        )}
        onClick={(e) => {
          e.preventDefault();
          pick("any");
        }}
      >
        {t("projects.newProject.genderAny")}
      </RoundedButton>
    </div>
  );
};

export default GenderSelection;
