import RoundedButton from "@/components/elements/RoundedButton";
import Image from "next/image";

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

const GenderSelection = ({
  selectedGender,
  setSelectedGender,
  setFieldValue,
}: GenderSelectionProps) => {
  return (
    <div className="grid grid-cols-2 gap-2 mt-4">
      <RoundedButton
        className={`p-1 min-w-32 flex items-center justify-center gap-1 ${
          selectedGender === "male" ? "bg-blue-500 text-white" : ""
        }`}
        onClick={(e) => {
          e.preventDefault();
          setSelectedGender("male");
          setFieldValue("gender", "male");
        }}
      >
        آقا
        <Image src="/images/icons/man.svg" width={25} height={25} alt="gender icon" />
      </RoundedButton>
      <RoundedButton
        className={`p-1 min-w-32 flex items-center justify-center gap-1 ${
          selectedGender === "female" ? "bg-pink-500 text-white" : ""
        }`}
        onClick={(e) => {
          e.preventDefault();
          setSelectedGender("female");
          setFieldValue("gender", "female");
        }}
      >
        خانم
        <Image src="/images/icons/woman.svg" width={25} height={25} alt="gender icon" />
      </RoundedButton>
    </div>
  );
};

export default GenderSelection;
