// ** MUI Imports
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography';

// ** Demo Components Imports
import TableProducts from 'src/views/tables/TableProducts';
import { Box, Button, CardContent, Stack } from '@mui/material';
import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
import { setup } from 'src/lib/csrf';

const ProductTable = () => {
  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <Card>
          <Box title="Products" titleTypographyProps={{ variant: 'h6' }}>
            <Stack m="2rem" direction="row" alignItems={'center'} justifyContent={'space-between'}>
              <Box>
                <Typography variant="h5">List Products</Typography>
              </Box>

              <Box>
                <Link href="./add">
                  <Button variant="contained">
                    <Stack direction="row" spacing={'0.2rem'}>
                      <AddCircleOutline />
                      <Box>Add</Box>
                    </Stack>
                  </Button>
                </Link>
              </Box>
            </Stack>
          </Box>
          <CardContent>
            <TableProducts />
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
};

export default ProductTable;

export const getServerSideProps = setup(async ({ req, res }) => {
  return { props: {} };
});
