import CircularLoading from "@/app/component/loading/Circular";
import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";

function ColTable({ data, loading }) {
  return (
    <ul className="grid grid-cols-1 sm:grid-cols-2 md:hidden flex-col gap-[16px]">
      {data.map((item, idx) => (
        <li
          key={idx}
          className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-transparent dark:bg-[#222433]"
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center justify-start gap-[8px] !text-nowrap">
              <CircularLoading width={32} height={32} loading={loading}>
                <Image src={item.image} alt="doctor" height={32} width={32} />
              </CircularLoading>
              <TextLoading width={40} height={18} loading={loading}>
                <p className="text-[#616161] dark:text-[#D7D8ED]">
                  {item.name}
                </p>
              </TextLoading>
            </div>
            <TextLoading width={105} height={18} loading={loading}>
              <p className="px-[8px] py-[4px] text-[#F17732] dark:bg-[#4E2E39] dark:text-[#FF5450] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
                تعداد نوبت: {item.number_of_turns}
              </p>
            </TextLoading>
          </div>
          <div className="flex flex-col mt-[16px]">
            <div className="flex items-center justify-between">
              <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
                تخصص:
              </p>
              <TextLoading width={90} height={18} loading={loading}>
                <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
                  {item.expertise}
                </p>
              </TextLoading>
            </div>
            <span className="block h-px w-full bg-[#EFEFEF] dark:bg-[#343645] my-[12px]"></span>
            <div className="flex items-center justify-between">
              <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
                تاریخ نوبت:
              </p>
              <TextLoading width={85} height={18} loading={loading}>
                <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
                  {item.date}
                </p>
              </TextLoading>
            </div>
            <span className="block h-px w-full bg-[#EFEFEF] dark:bg-[#343645] my-[12px]"></span>
            <div className="flex items-center justify-between">
              <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
                ساعت نوبت:
              </p>
              <TextLoading width={60} height={18} loading={loading}>
                <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
                  {item.hour}
                </p>
              </TextLoading>
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}

export default ColTable;