import Link from "next/link";

function ItemSpecialties({ data, cityName, stateName }) {
  return (
    <li>
      <Link
        href={{
          pathname: "/doctors",
          query: {
            specialty: data.name,
            ...(cityName && { city: cityName }),
            ...(stateName && { state: 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;