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: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>

      {/* Title and All Transactions Button */}
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1 }}>
        <Typography variant="h6">
          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>
  )
}