import { Button } from "@mui/material";
import ArrowLeftP from "../../../icons/ArrowLeftP";
import Table from "./Table";
import ColTable from "../../ColTable";

function List({ data, loading }) {
  return (
    <div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF] dark:bg-transparent md:dark:bg-[#222433] dark:border-transparent">
      <div className="items-center justify-between p-[16px] flex">
        <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
          لیست نوبت های پزشکان
        </p>
        <Button
          variant="text"
          className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1 dark:!text-[#A1A1A1]"
        >
          مشاهده همه
          <ArrowLeftP />
        </Button>
      </div>
      <div className="w-full overflow-auto">
        <Table data={data} loading={loading} />
        <ColTable data={data.list_of_doctors_appointments} loading={loading} />
      </div>
    </div>
  );
}

export default List;