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

import "./TransactionsOverViewTable.scss";

interface ITableData {
  state: string;
  count: number;
  percentage: string;
  color?: string;
}

interface ITransactionsOverViewTableProps {
  data?: ITableData[];
}

const defaultData: ITableData[] = [
  { 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 = ({
  data = defaultData,
}: ITransactionsOverViewTableProps) => {
  console.log("data", data);

  return (
    <TableContainer className="transactions-overview-table" 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>
          {data.map((row, i) => (
            <TableRow key={`${row.state}-${i}`}>
              <TableCell align="center">
                <Box className="transactions-overview-table__state-wrapper">
                  <Box
                    className="transactions-overview-table__state"
                    sx={{
                      bgcolor: row.color,
                    }}
                  />
                  {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>
  );
};