import { Box } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { Transactions } from "../features/province/components/transactions/Transactions";
import { BackButton } from "../components/back-button/BackButton";
import { useParams } from "react-router-dom";
import { ProvinceShowStewardsTransactions } from "../features/province/components/province-show-stewards-transactions/ProvinceShowStewardsTransactions";

const TransactionsPage = () => {
  const { key, name } = useParams();

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <BackButton />
          <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
            <Grid xs={12}>
              {key ? (
                <ProvinceShowStewardsTransactions name={name} key={key} />
              ) : (
                <Transactions />
              )}
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default TransactionsPage;
