import CustomTable from '@/app/component/CustomTable';
import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
import { Button, TableCell, TableRow } from '@mui/material'
import Image from 'next/image'

function List({ user, setIsTurnsDetails }) {

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


    return (
        <div className='!mt-[24px]'>
            <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='!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.expertise}</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">
                            <Button
                                className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
                                onClick={() => setIsTurnsDetails(true)}
                                variant='text'
                            >
                                مشاهده جزئیات
                                <ArrowLeftBlueD />
                            </Button>
                        </TableCell>
                    </TableRow>
                ))}
            </CustomTable>
        </div>
    )
}

export default List