import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardActions from '@mui/material/CardActions'
import CardContent from '@mui/material/CardContent'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import Link from '@mui/material/Link'

export default function Gade() {
  return (
    <Box sx={{minWidth: 275, marginBottom: 3}}>
      <Card>
        <CardContent>
          <Link href='https://gade.o-k-i.net' target='_blank' rel='noopener' underline='hover'>
            <Typography gutterBottom variant='h5'>
              Gadé
            </Typography>
          </Link>
          <Typography variant='h6' component='div'>
            Alternative pour <strong>YouTube</strong>
          </Typography>
          <Typography gutterBottom variant='body2'>
            Streaming vidéo <strong>sans aucune publicité</strong>.
            <br />
            Vous pouvez commenter les vidéos avec un compte {'"Palé"'}.
          </Typography>
        </CardContent>
        <Box sx={{display: 'flex', justifyContent: 'center'}}>
          <CardActions>
            <Button target='_blank' rel='noopener' href='https://gade.o-k-i.net'>Accéder à Gadé</Button>
          </CardActions>
        </Box>
      </Card>
    </Box>
  )
}