import React, {useState} from 'react'
import {Container, Link, makeStyles, Typography} from '@material-ui/core'
import CGUDialog from './cgu/cgu-dialog'

const useStyles = makeStyles(theme => ({
  footer: {
    padding: theme.spacing(3, 2),
    marginTop: 'auto',
    backgroundColor:
      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
  },
  text: {
    fontWeight: 'bold'
  }
}))

export default function Footer() {
  const classes = useStyles()
  const [open, setOpen] = useState(false)

  return (
    <>
      <CGUDialog open={open} setOpen={setOpen} />
      <footer id='cgu' className={classes.footer}>
        <Container>
          <Typography className={classes.text} align='center' variant='body1'>
            <Link href='#cgu' onClick={() => setOpen(true)}>
              Voir les CGU et la politique de confidentialité
            </Link>
          </Typography>
        </Container>
      </footer>
    </>
  )
}