import Image from "next/image";
import { Button, Skeleton } from "@mui/material";

// 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";
import Link from "next/link";
import CustomLoading from "./loading/Custom";
import TextLoading from "./loading/Text";
import CircularLoading from "./loading/Circular";

function ItemDoctor({ doctor, loading }) {
  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}
            src={doctor.img}
            alt="image-doctor"
            className="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 width={90} height={15} loading={loading}>
            <p className="text-[#3B3B3B] text-[14px] font-bold">
              {doctor.name}
            </p>
          </TextLoading>
          <TextLoading width={120} height={15} loading={loading}>
            <p className="text-[#616161] text-[14px] font-normal">
              تخصص: {doctor.expertise}
            </p>
          </TextLoading>
          <CustomLoading width={100} height={25} loading={loading}>
            <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 width={150} height={15} loading={loading}>
          <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]
                    ${
                      doctor.free_turn
                        ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
                        : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
                    }`}
        >
          {doctor.free_turn
            ? `اولین نوبت آزاد: ${doctor.free_turn}`
            : "نوبت ندارد"}
        </p>
      </CustomLoading>
      {/* Arrow */}
      <Link href={`/doctor/${doctor.id}`}>
        <Button
          variant="contained"
          className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
                     ${!doctor.free_turn || (loading && "!bg-[#D7D7D7]")}
                    `}
          disabled={!doctor.free_turn || loading}
        >
          <ArrowLeftD />
        </Button>
      </Link>
    </li>
  );
}

export default ItemDoctor;