import CustomTable from "@/app/component/CustomTable";
import { TableCell, TableRow } from "@mui/material";
import Image from "next/image";
import Card from "./Card";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";
import CircularLoading from "@/app/component/loading/Circular";

function List({ user, loading }) {

    const tableHead = ['ردیف', 'شناسه', 'نام پزشک', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'وضعیت']
    const centerTable = [0, 4, 5];

    return (
        <div className='!mt-[32px]'>
            <div className="hidden md:block w-full">
                <CustomTable
                    tableHead={tableHead}
                    centerTable={centerTable}
                >
                    {user.turns.map((row, idx) => (
                        <TableRow
                            key={idx}
                            className='!border-0 !border-b !border-[#DBDBDB]'
                        >
                            <TableCell className='!pr-[18px] !text-nowrap' align="center">
                                <TextLoading width={15} height={18} loading={loading}>
                                    {idx + 1}
                                </TextLoading>
                            </TableCell>
                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
                                <TextLoading width={30} height={18} loading={loading}>
                                    {row.id}
                                </TextLoading>
                            </TableCell>
                            <TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
                                <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
                                    <CircularLoading width={32} height={32} loading={loading}>
                                        <Image
                                            src={row.image}
                                            alt='doctor'
                                            height={32}
                                            width={32}
                                        />
                                    </CircularLoading>
                                    <TextLoading width={40} height={18} loading={loading}>
                                        {row.name}
                                    </TextLoading>
                                </div>
                            </TableCell>
                            <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
                                <TextLoading width={50} height={18} loading={loading}>
                                    {row.date}
                                </TextLoading>
                            </TableCell>
                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
                                <TextLoading width={50} height={18} loading={loading}>
                                    {row.time}
                                </TextLoading>
                            </TableCell>
                            <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
                                <TextLoading width={50} height={18} loading={loading}>
                                    {row.amount}
                                </TextLoading>
                            </TableCell>
                            <TableCell className='!pr-[18px] !text-nowrap' align="right">
                                <CustomLoading width={80} height={22} loading={loading}>
                                    <div
                                        className={`
                                    w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium cursor-pointer select-none
                                    ${row.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
                                                row.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
                                `}
                                        variant='text'
                                    >
                                        {row.status === 'success' ? 'پرداخت شده' :
                                            row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
                                    </div>
                                </CustomLoading>
                            </TableCell>
                        </TableRow>
                    ))}
                </CustomTable>
            </div>
            <ul className="flex md:hidden flex-col gap-y-[24px]">
                {user.turns.map((row, idx) => (
                    <Card
                        key={idx}
                        data={row}
                        loading={loading}
                    />
                ))}
            </ul>
        </div>
    )
}

export default List