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

const data1 = [
  { state: 'Success', count: 120, percentage: '60%', color: 'green' },
  { state: 'Pending', count: 50, percentage: '25%', color: 'orange' },
  { state: 'Failed', count: 20, percentage: '10%', color: 'red' },
  { state: 'Other', count: 10, percentage: '5%', color: 'gray' }
];

export const TransactionsOverviewTable = () => {
  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell align="center">State</TableCell>
            <TableCell align="center">Count</TableCell>
            <TableCell align="center">Percentage</TableCell>
            <TableCell align="center">Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data1.map((row) => (
            <TableRow key={row.state}>
              <TableCell align="center">
                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'flex-start',
                    alignItems: 'center',
                    mx: 'auto',           // center the flexbox itself
                    width: '73px'        // consistent width for alignment
                  }}
                >
                  <Box
                    sx={{
                      width: 10,
                      height: 10,
                      borderRadius: '50%',
                      bgcolor: row.color,
                      mr: 1
                    }}
                  />
                  {row.state}
                </Box>
              </TableCell>
              <TableCell align="center">{row.count}</TableCell>
              <TableCell align="center">{row.percentage}</TableCell>
              <TableCell align="center">
                <Button variant="outlined" size="small">
                  View
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};