// import React from "react";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";

import Box from "@mui/material/Box";
import { Grid } from "@mui/material";

function Footer(): JSX.Element {
    return (
        <Box sx={{
            flexGrow: "1",
            display: "flex",
            flexDirection: "column",
            backgroundColor: "#242424",
            // backgroundColor: "background.paper",
            color: "text.secondary"
        }}>
            <Grid container sx={{ mt: 6, maxWidth: "1000px", width: "100%", mx: "auto" }}>
                <Container sx={{textAlign: "center"}}>
                    <Typography color="text.secondary" gutterBottom sx={{userSelect: "none",opacity:"40%"}}>
                       Δ DeltaLabs {new Date().getFullYear()}
                    </Typography>
                </Container>
                {/* { ["Tasteful", "Looking", "Footer"].map((letter): JSX.Element => {
                    return (
                        <Grid key={letter} item xs={12} sm={6} md={4} lg={4} sx={{textAlign: "center"}}>
                            <Typography>{letter}</Typography>
                        </Grid>
                    )
                }) } */}
            </Grid>
        </Box>
    )
}

export default Footer;