import Link from "next/link";

import specialtiesData from "@/data/specialties.json";

// slug تمیز از data/specialties.json؛ اگر تخصصی slug نداشت، به کوئری قدیمی برمی‌گردیم.
function specialtyHref(data, cityName, stateName) {
  const slug = data.slug || specialtiesData.find((s) => s.id === data.id)?.slug;
  if (slug) return `/specialties/${slug}`;
  return {
    pathname: "/doctors",
    query: {
      specialty: data.name,
      ...(cityName && { city: cityName }),
      ...(stateName && { state: stateName }),
    },
  };
}

function ItemSpecialties({ data, cityName, stateName }) {
  return (
    <li>
      <Link
        href={specialtyHref(data, cityName, stateName)}
        className="py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] hover:bg-[#5559CE] transition-all text-item-head-white duration-500 cursor-pointer hover-mode-item-speciality"
      >
        <h2 className="text-[#3B3B3B] item-head text-[16px] font-bold text-center">
          {data.name}
        </h2>
        <p className="text-[#7E7E7E] text-[14px] font-medium">
          {data.number_of_doctors} پزشک
        </p>
      </Link>
    </li>
  );
}

export default ItemSpecialties;