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

const PREFIX = 'footer'

const classes = {
  footer: `${PREFIX}-footer`,
  text: `${PREFIX}-text`
}

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.footer}`]: {
    padding: theme.spacing(3, 2),
    marginTop: 'auto',
    backgroundColor:
      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
  },

  [`& .${classes.text}`]: {
    fontWeight: 'bold'
  }
}))

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

  return (
    (
      <Root>
        <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>
      </Root>
    )
  )
}