import CircularLoading from "@/app/component/loading/Circular";
import TextLoading from "@/app/component/loading/Text";
import ArrowLeftD from "@/components/icons/ArrowLeftD";
import ClockClinic from "@/components/icons/ClockClinic";
import LocationClinic from "@/components/icons/LocationClinic";
import { Button } from "@mui/material";
import Image from "next/image";
import Link from "next/link";

function ItemClinic({ data, loading }) {
  return (
    <li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
      <div className="flex items-center justify-start gap-2">
        <CircularLoading loading={loading} width={60} height={60}>
          <Image width={60} height={60} src={data.img} alt="img clinic" />
        </CircularLoading>
        <div className="flex flex-col items-start justify-center gap-2">
          <TextLoading loading={loading} width={100} height={18}>
            <p className="text-[#3B3B3B] text-[14px] font-bold">{data.title}</p>
          </TextLoading>
          <TextLoading loading={loading} width={60} height={18}>
            <p className="text-[#7E7E7E] text-[14px] font-normal">
              {data.doctors} پزشک
            </p>
          </TextLoading>
        </div>
      </div>
      <div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
        <div className="flex items-start justify-start gap-0.5">
          <LocationClinic />
          <TextLoading loading={loading} width={150} height={18}>
            <p className="text-[#7E7E7E] text-[12px] font-normal">
              {data.location}
            </p>
          </TextLoading>
        </div>
        <div className="flex items-start justify-start gap-0.5 ml-[64px]">
          <ClockClinic />
          <TextLoading loading={loading} width={120} height={18}>
            <p className="text-[#7E7E7E] text-[12px] font-normal">
              ساعت کاری: {data.hours_of_work}
            </p>
          </TextLoading>
        </div>
      </div>

      {/* Arrow */}
      <Link href={loading ? "#" : `/clinic/${data.id}`}>
        <Button
          className={`${
            loading ? "!bg-[#E7E7E7]" : "!bg-[#5559CE]"
          } !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit`}
          disabled={loading}
        >
          <ArrowLeftD />
        </Button>
      </Link>
    </li>
  );
}

export default ItemClinic;