import TextLoading from "@/app/component/loading/Text";
import React from "react";
import { useRouter } from "next/navigation";

function ItemSpecialties({ data, loading }) {
  const router = useRouter();
  
  const handleClick = () => {
    router.push(`/doctors?specialties=${data.id}`);
  };

  return (
    <li
      onClick={handleClick}
      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 duration-500 cursor-pointer hover-mode-item-speciality"
    >
      <TextLoading loading={loading} width={70} height={18}>
        <p className="text-[#3B3B3B] text-[16px] font-bold">{data.name}</p>
      </TextLoading>
      <TextLoading loading={loading} width={50} height={18}>
        <p className="text-[#7E7E7E] text-[14px] font-medium">
          {data.number_of_doctors} پزشک
        </p>
      </TextLoading>
    </li>
  );
}

export default ItemSpecialties;