import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Container from '@mui/material/Container'
import Link from '@mui/material/Link'
import {grey} from '@mui/material/colors'

const appFooterText = process.env.NEXT_PUBLIC_APP_FOOTER_TEXT
const appFooterUrl = process.env.NEXT_PUBLIC_APP_FOOTER_URL

export default function Footer() {
  return (
    <Box
      component='footer'
      sx={{
        textAlign: 'center',
        py: 3,
        px: 2,
        mt: 'auto',
        backgroundColor: grey[800]
      }}
    >
      <Container maxWidth='sm'>
        <Typography fontWeight='bold' variant='body2'>
          <Link underline='hover' color='inherit' href={appFooterUrl}>
            {appFooterText.toUpperCase()}
          </Link>
        </Typography>
      </Container>
    </Box>
  )
}