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]">
            <div className="flex items-center justify-between p-[16px]">
                <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">لیست نوبت های پزشکان</p>
                <Button
                    variant="text"
                    className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
                >
                    مشاهده همه
                    <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