import { Rating } from "@mui/material";
import ProgressAll from "./ProgressAll";
import StarDI from "@/components/icons/StarDI";
import LikeDI from "@/components/icons/LikeDI";
import ProgressDetail from "@/app/component/ProfressDetail";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";
import CircularLoading from "@/app/component/loading/Circular";

function Chart({ doctor, loading }) {
  return (
    <div
      className="
            rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF] 
            pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
        "
    >
      <TextLoading loading={loading} width={130} height={20}>
        <div className="flex items-center justify-start gap-2.5">
          <p className="text-[#616161] text-[14px] font-medium">
            امتیاز کلی کاربران: {doctor.overall_score} از 5
          </p>
          <p className="text-[#7E7E7E] text-[14px] font-normal">
            (از مجموع {doctor.comments.length} نظر)
          </p>
        </div>
      </TextLoading>
      <div className={`${loading ? "mt-4 mb-6" : "mt-0 mb-0"} hidden md:flex`}>
        <TextLoading loading={loading} width={160} height={20}>
          <Rating
            readOnly
            value={4}
            size="small"
            name="read-only"
            className="!mt-4 !mb-6 !hidden lg:!flex"
          />
        </TextLoading>
      </div>
      <div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
        <CustomLoading loading={loading} width={130} height={30}>
          <div className="flex p-1 gap-0.5 items-start justify-center">
            <StarDI />
            <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
              امتیاز: {doctor.point}
            </p>
          </div>
          <div className="flex p-1 items-start gap-0.5">
            <LikeDI />
            <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
              {doctor.satisfaction}% رضایت کاربران
            </p>
          </div>
        </CustomLoading>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-[50px]">
        <ul
          className={`flex w-full flex-col items-start justify-start gap-1.5 ${
            loading ? "lg:w-full" : "lg:w-fit"
          }`}
        >
          {doctor.progress_detail.map((item, idx) => (
            <TextLoading width="full" height={20} loading={loading}>
              <ProgressDetail data={item} key={idx} />
            </TextLoading>
          ))}
        </ul>
        <ProgressAll doctor={doctor} loading={loading} />
      </div>
    </div>
  );
}

export default Chart;
