"use client";

import { useEffect, useState } from "react";
import { getCookie } from "cookies-next";
import { openGenderSelect, SALON_GENDER_COOKIE } from "@/components/gender-select/gender-select";

export function GenderIndicator() {
  const [label, setLabel] = useState("آقایان / خانم‌ها");

  useEffect(() => {
    const sync = () => {
      const g = getCookie(SALON_GENDER_COOKIE);
      setLabel(g === "1" ? "آقایان" : g === "2" ? "خانم‌ها" : "آقایان / خانم‌ها");
    };
    sync();
    window.addEventListener("salon-gender-changed", sync);
    return () => window.removeEventListener("salon-gender-changed", sync);
  }, []);

  return (
    <button
      type="button"
      onClick={() => openGenderSelect()}
      className="border border-footerBg px-4 py-2 rounded-button font-medium whitespace-nowrap"
    >
      {label}
    </button>
  );
}