import { useRouter } from "next/navigation";
import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
import { PieCharts } from "../PieCharts/PieCharts";

import MoreVertIcon from "@mui/icons-material/MoreVert";
import { TransactionsOverViewTable } from "./components/TransactionsOverViewTable";

import "./TransactionsOverView.scss";

export const TransactionsOverView = () => {
  const router = useRouter();
  return (
    <Paper className="transaction-overview" elevation={3}>
      {/* Title and All Transactions Button */}
      <Box className="transaction-overview__header">
        <Typography variant="h5" fontWeight="bold">
          Transactions Overview (Last 24h)
        </Typography>
        <Box>
          <Button
            variant="contained"
            color="primary"
            onClick={() => router.push("dashboard/transactions")}
          >
            All Transactions
          </Button>
          <IconButton size="small">
            <MoreVertIcon fontSize="small" />
          </IconButton>
        </Box>
      </Box>

      {/* Chart and Table */}
      <Box className="transaction-overview__chart-table">
        <PieCharts />
        <TransactionsOverViewTable />
      </Box>
    </Paper>
  );
};