import CustomTable from "@/app/component/CustomTable";
import { TableCell, TableRow } from "@mui/material";
import Image from "next/image";

function List({ user }) {

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

    return (
        <div className='!mt-[32px]'>
            <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">{idx + 1}</TableCell>
                        <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.id}</TableCell>
                        <TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
                            <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
                                <Image
                                    src={row.image}
                                    alt='doctor'
                                    height={32}
                                    width={32}
                                />
                                {row.name}
                            </div>
                        </TableCell>
                        <TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
                        <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
                        <TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
                        <TableCell className='!pr-[18px] !text-nowrap' align="right">
                            <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>
                        </TableCell>
                    </TableRow>
                ))}
            </CustomTable>
        </div>
    )
}

export default List