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 { imageUrl } from "@/helper";
import { Button } from "@mui/material";
import Image from "next/image";
import Link from "next/link";

function ItemClinic({ setFilteredClinics, data, loading }) {
  const handleLoading = () => {
    setFilteredClinics((prevClinics) =>
      prevClinics.map((item) =>
        item.id === data.id
          ? { ...item, loading: true }
          : { ...item, loading: false }
      )
    );
  };

  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}
            className="object-cover rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
            src={imageUrl(data.clinic_logo, "/assets/images/logo.png")}
            alt="img clinic"
          />
        </CircularLoading>
        <div className="flex flex-col items-start justify-center gap-2">
          <Link href={`/clinic/${data.uuid}`}>
            <TextLoading loading={loading} width={100} height={18}>
              <h3 className="text-[#3B3B3B] text-[14px] font-bold">
                {data.title}
              </h3>
            </TextLoading>
          </Link>
          <TextLoading loading={loading} width={60} height={18}>
            <p className="text-[#7E7E7E] text-[14px] font-normal">
              {data.doctors_count ?? 0} پزشک
            </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.state, data.city].filter(Boolean).join("، ") || "نامشخص"}
            </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["24_7"]
                ? "۲۴ ساعته"
                : data.field_working_days || "نامشخص"}
            </p>
          </TextLoading>
        </div>
      </div>

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

export default ItemClinic;