import {
  Box,
  Button,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography
} from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';

import MoreVertIcon from '@mui/icons-material/MoreVert';

const transactions = [

  {
    id: '1049078821',
    user: '17',
    created: '2025-06-17 16:45',
    type: 'BestPayWithdrawal',
    amount: '-787.49 TRY',
    psp: 'BestPay'
  },
  {
    id: '1049078822',
    user: '17',
    created: '2025-06-17 16:45',
    type: 'BestPayWithdrawal',
    amount: '-787.49 TRY',
    psp: 'BestPay'
  },
  {
    id: '1049078823',
    user: '17',
    created: '2025-06-17 16:45',
    type: 'BestPayWithdrawal',
    amount: '-787.49 TRY',
    psp: 'BestPay'
  },
  {
    id: '1049078824',
    user: '17',
    created: '2025-06-17 16:45',
    type: 'BestPayWithdrawal',
    amount: '-787.49 TRY',
    psp: 'BestPay'
  }
];

export const TransactionsWaitingApproval = () => {
  return (

    <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>

      <Box sx={{ p: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
          <Typography variant="h6" fontWeight="bold">
            Transactions Waiting for Approval
          </Typography>
          <Box>
            <Button variant="outlined">All Pending Withdrawals</Button>

            <IconButton size="small">
              <MoreVertIcon fontSize="small" />
            </IconButton>       </Box>
        </Box>

        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell><strong>ID</strong></TableCell>
                <TableCell><strong>User</strong></TableCell>
                <TableCell><strong>Created</strong></TableCell>
                <TableCell><strong>Type</strong></TableCell>
                <TableCell><strong>Amount</strong></TableCell>
                <TableCell><strong>PSP</strong></TableCell>
                <TableCell><strong>Action</strong></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {transactions.map((tx) => (
                <TableRow key={tx.id}>
                  <TableCell>{tx.id}</TableCell>
                  <TableCell>{tx.user}</TableCell>
                  <TableCell>{tx.created}</TableCell>
                  <TableCell>{tx.type}</TableCell>
                  <TableCell>{tx.amount}</TableCell>
                  <TableCell>{tx.psp}</TableCell>
                  <TableCell>
                    <IconButton color="success">
                      <CheckCircleIcon />
                    </IconButton>
                    <IconButton color="error">
                      <CancelIcon />
                    </IconButton>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
    </Paper>
  );
}