import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
import React, { useEffect } from "react";
import "@scss/transactions.scss";

function createData(
    d: string,
    description: string,
    amount: number,
    total: number
) {
    const date: Date = new Date(d);
    return { date, description, amount, total };
}

const rows = [
    createData("05.10.2022", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30),
    createData("04.10.2022", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153),
    createData("30.09.2022", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3),
    createData("30.09.2022", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6),
    createData("15.08.2022", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74),
    createData("12.08.2022", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246),
    createData("5.08.2022", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46),
    createData("1.08.2022", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59),
    createData("26.07.2022", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86),
    createData("20.07.2022", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150),
];


export default function Transactions() {
    return (
        <div id="tablePage">
            <header>
                header
            </header>
            <aside>
                sidebar
            </aside>
            <main>
                <TableContainer className="table" component={Paper}>
                    <Table aria-label="simple table">
                        <TableHead>
                            <TableRow>
                                <TableCell>Date</TableCell>
                                <TableCell>Description</TableCell>
                                <TableCell align="right">Amount</TableCell>
                                <TableCell align="right">Total</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {rows.map((row) => (
                                <TableRow
                                    key={row.date.getDate()}
                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                >
                                    <TableCell component="th" scope="row">
                                        {row.date.toDateString()}
                                    </TableCell>
                                    <TableCell>{row.description}</TableCell>
                                    <TableCell align="right">{row.amount}</TableCell>
                                    <TableCell align="right">{row.total}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </TableContainer>
            </main>
            <footer>
                footer
            </footer>
        </div>
    );
}