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 "./TransactionsOverViewTable";

export const TransactionsOverview = () => {
  const router = useRouter();
  return (
    <Paper
      elevation={3}
      sx={{
        padding: "23px",
        margin: 2,
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Title and All Transactions Button */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          px: 1,
        }}
      >
        <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
        sx={{
          padding: 2,
          margin: 2,
          display: "flex",
          flexDirection: "row",
          flexWrap: {
            xs: "wrap", // Wrap on small screens
            md: "nowrap", // No wrap on medium and up
          },
          gap: {
            xs: 4, // Add spacing on small screens
            md: 0, // No spacing on larger screens
          },
        }}
      >
        <PieCharts />
        <TransactionsOverviewTable />
      </Box>
    </Paper>
  );
};
