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>
  );
};