nobat724_front/app/component/ItemDoctor.js

import Image from "next/image";
import { Button } from "@mui/material";
import Link from "next/link";
import CustomLoading from "./loading/Custom";
import TextLoading from "./loading/Text";
import CircularLoading from "./loading/Circular";

// Icons
import ArrowLeftD from "@/components/icons/ArrowLeftD";
import ClockD from "@/components/icons/ClockD";
import LikeD from "@/components/icons/LikeD";
import PointD from "@/components/icons/PointD";

function ItemDoctor({ doctor, loading, setDoctors }) {
  const handleLoading = () => {
    setDoctors((prevDoctors) =>
      prevDoctors.map((item) =>
        item.id === doctor.id
          ? { ...item, loading: true }
          : { ...item, loading: false }
      )
    );
  };

  return (
    <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
      {/* Detail Doctor */}
      <div className="flex items-center justify-start gap-2.5">
        <CircularLoading loading={loading} width={66} height={66}>
          <Image
            width={72}
            height={72}
            alt="image-doctor"
            src={doctor?.img?.[0]?.url || "/assets/images/user.png"}
            className="object-contain rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
          />
        </CircularLoading>
        <div className="flex flex-col items-start justify-center gap-2">
          <TextLoading loading={loading} width={90} height={15}>
            <Link href={`/doctor/${doctor?.uuid}`}>
              <p className="text-[#3B3B3B] text-[14px] font-bold">
                {doctor?.name}
              </p>
            </Link>
          </TextLoading>
          <TextLoading loading={loading} width={120} height={15}>
            <p className="text-[#616161] text-[14px] font-normal">
              تخصص:
              {doctor?.specialties?.map(
                (item, idx) =>
                  `${item.name} ${doctor.specialties.length === idx + 1 ? "" : "|"} `
              )}
            </p>
          </TextLoading>
          <CustomLoading loading={loading} width={100} height={25}>
            <div className="flex rounded items-center justify-start gap-2">
              <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                <LikeD />
                <p className="text-[#616161] text-[12px] font-normal">
                  {doctor?.satisfaction}%
                </p>
              </div>
              <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                <PointD />
                <p className="text-[#616161] text-[12px] font-normal">
                  {doctor?.point}
                </p>
              </div>
            </div>
          </CustomLoading>
        </div>
      </div>

      {/* Hours of work */}
      <div className="flex my-4 items-center justify-start gap-0.5">
        <ClockD />
        <TextLoading loading={loading} width={150} height={15}>
          <p className="text-[#7E7E7E] text-[12px] font-normal">
            ساعت کاری: {doctor?.hours_of_work}
          </p>
        </TextLoading>
      </div>
      <CustomLoading loading={loading} width={150} height={20}>
        <p
          className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                    ${Number(doctor?.active)
              ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
              : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
            }`}
        >
          {doctor?.free_turn}
        </p>
      </CustomLoading>
      {/* Arrow */}
      <Link href={`/doctor/${doctor?.uuid}`}>
        <Button
          variant="contained"
          onClick={handleLoading}
          loading={doctor?.loading}
          className="!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit"
        >
          <div className={doctor && doctor.loading ? "opacity-0" : ""}>
            <ArrowLeftD />
          </div>
        </Button>
      </Link>
    </li>
  );
}

export default ItemDoctor;