import { Box, Button } from "@mui/material";
import React from "react";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { BackButton } from "../components/back-button/BackButton";
import ResponsiveTable from "../components/responsive-table/ResponsiveTable";

const BarSquareTransactions = () => {
  const data = [
    [
      "1",
      "1404/2/17",
      "پرداخت شده",
      "1,150,000",
      <Button
        href="https://miran.storage.c2.liara.space/factor/1.pdf"
        size="small"
        variant="contained"
        key="ee"
      >
        دانلود
      </Button>,
    ],
    [
      "2",
      "1404/2/16",
      "پرداخت شده",
      "830,000",
      <Button
        href="https://miran.storage.c2.liara.space/factor/2.pdf"
        size="small"
        variant="contained"
        key="ee"
      >
        دانلود
      </Button>,
    ],
    [
      "3",
      "1404/2/16",
      "پرداخت شده",
      "12,000,000",
      <Button
        href="https://miran.storage.c2.liara.space/factor/3.pdf"
        size="small"
        variant="contained"
        key="ee"
      >
        دانلود
      </Button>,
    ],
    [
      "4",
      "1404/2/15",
      "پرداخت شده",
      "120,000",
      <Button
        href="https://miran.storage.c2.liara.space/factor/4.pdf"
        size="small"
        variant="contained"
        key="ee"
      >
        دانلود
      </Button>,
    ],
    [
      "5",
      "1404/2/14",
      "پرداخت شده",
      "8,100,000",
      <Button
        href="https://miran.storage.c2.liara.space/factor/5.pdf"
        size="small"
        variant="contained"
        key="ee"
      >
        دانلود
      </Button>,
    ],
  ];
  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
        my={SPACING.MEDIUM}
      >
        <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
          <Grid xs={12} container>
            <BackButton />
          </Grid>
          <Grid xs={12}>
            <ResponsiveTable
              paginated
              title="تراکنش ها"
              data={data}
              columns={[
                "ردیف",
                "تاریخ",
                "وضعیت",
                "مبلغ تراکنش",
                "جزئیات محصولات",
              ]}
            />
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};

export default BarSquareTransactions;
