// import React from 'react';
// import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
// import './updateIntentTable.css';

// const CustomizedTable = () => {
//   return (
//     <TableContainer className="card-border">
//       <Table>
//         <TableHead>
//           <TableRow style={{ backgroundColor: '#EDEFF4', color: 'white' }}>
//             <TableCell>Fulfillments</TableCell>
//             {/* <div style={{ width: '1px', height: '45px', flexShrink: 0, backgroundColor: 'black' }}></div> */}
//             <TableCell>Status</TableCell>
//           </TableRow>
//         </TableHead>
//         <TableBody>
//           <TableRow>
//             <TableCell style={{ color: 'var(--Primary, #287FCE)'  }} className="font-medium text-small">Exercising Options workflow</TableCell>
//             {/* <TableCell></TableCell> */}
//             <TableCell className={'storybook-select-chip-green'}>Active</TableCell>
//           </TableRow>
//         </TableBody>
//       </Table>
//     </TableContainer>
//   );
// };

// export default CustomizedTable;


import React from 'react';
import { Table, TableHead, TableBody, TableRow, TableCell, withStyles, TableContainer } from '@mui/material';
import './updateIntentTable.css';

interface CustomTableProps {
  headers: string[];
  data: string[][];
  showColumnVerticalBorder: boolean;
}

const CustomTable: React.FC<CustomTableProps> = ({ data, headers, showColumnVerticalBorder }) => {
  return (
    <TableContainer className="card-border">
      <Table className='showColumnVerticalBorder'>
        <TableHead>
          <TableRow>
            {headers.map((header, index) => (
              <TableCell key={index} style={{ background: '#EDEFF4', color: 'black', borderRight: showColumnVerticalBorder ? '1px solid #D0D6E1' : 'none' }}>{header}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, index) => (
            <TableRow key={index}>
              {row.map((cell, index) => (
                <TableCell key={index} style={{ backgroundColor: '#FFF' }}>{cell}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default CustomTable;


// import { TableCell } from '@mui/material';
// import { DataGrid as MuiDataGrid, DataGridProps as MuiDataGridProps } from '@mui/x-data-grid';


// export interface DataGridProps extends MuiDataGridProps {

// }

// export const CustomTable = ({ ...rest }: DataGridProps) =>
//  <MuiDataGrid {...rest}>

//               <TableCell style={{ background: '#EDEFF4', color: 'black'}}></TableCell>
      
//  </MuiDataGrid>