import CalendarTickGreenP from "../../icons/CalendarTickGreenP";
import TextLoading from "@/app/component/loading/Text";
import CardOrangeP from "../../icons/CardOrangeP";
import PeopleBlueP from "../../icons/PeopleBlueP";

function Cards({ data, loading }) {
  const list = [
    {
      text: "تعداد کل بیماران",
      bg_color: "bg-[#E5E9FF] dark:bg-[#5559CE]",
      value: data.number_of_patients,
      label: "نفر",
      icon: <PeopleBlueP />,
    },
    {
      text: "نوبت های امروز",
      bg_color: "bg-[rgba(20,204,38,0.14)] dark:bg-[#009D79]",
      value: data.today_turns,
      label: "نوبت",
      icon: <CalendarTickGreenP />,
    },
    {
      text: "پرداختی ها",
      bg_color: "bg-[#FFD8C5] dark:bg-[#F17732]",
      value: data.payments,
      label: "تومان",
      icon: <CardOrangeP />,
    },
  ];

  return (
    <ul className="flex lg:grid lg:grid-cols-3 flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-0 sm:mx-[16px]">
      {list.map((item, idx) => (
        <li
          className="flex min-w-[194px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[8px] border 
          border-solid border-[#EFEFEF] bg-[#FFF] dark:bg-[#222433] dark:border-transparent"
          key={idx}
        >
          <div
            className={`p-[12px] w-fit h-fit rounded-[2px] ${item.bg_color}`}
          >
            {item.icon}
          </div>
          <div className="flex items-center justify-between gap-[4px]">
            <p className="text-[#525252] text-[14px] font-normal dark:text-[#D7D8ED]">
              {item.text}
            </p>
            <TextLoading width={70} height={20} loading={loading}>
              <p className="text-[#3B3B3B] text-[24px] font-medium dark:text-[#A1A1A1]">
                {item.value}
                <span className="text-[#616161] mr-[6px] text-[12px] font-normal dark:text-[#A1A1A1]">
                  {item.label}
                </span>
              </p>
            </TextLoading>
          </div>
        </li>
      ))}
    </ul>
  );
}

export default Cards;