import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'

function CustomTable({ tableHead, centerTable, children }) {
    return (
        <TableContainer className='!shadow-none !rounded-[8px] !border !border-solid !border-[#DBDBDB]'>
            <Table className='!rounded-[8px] !overflow-hidden'>
                <TableHead>
                    <TableRow
                        className='!bg-[#EFEFEF]'
                    >
                        {tableHead.map((item, idx) => (
                            <TableCell
                                key={idx}
                                className={`
                                !text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
                                ${centerTable.find(i => i === idx) ? '!text-center' : '!text-start'}
                            `}
                            >
                                {item}
                            </TableCell>
                        ))}
                    </TableRow>
                </TableHead>
                <TableBody>
                    {children}
                </TableBody>
            </Table>
        </TableContainer>
    )
}

export default CustomTable