import React from 'react';

import { makeStyles } from '@material-ui/core/styles';

import Container from '@material-ui/core/Container';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({

container: {
marginLeft: theme.spacing(0)
},
header: {
color: theme.palette.common.white,
},
action: {
marginRight: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
width: '100%',
marginRight: theme.spacing(0),
marginBottom: theme.spacing(2),
}
},
}));

export default function Cookies(props) {

const classes = useStyles();

const content = {
'header': 'Cookie Policy',
'description': 'We use cookies to personalise content, to provide social media
features and to analyse our traffic. We also share information about your use of
our site with our social media, advertising and analytics partners.',
'primary-action': 'Accept cookies',
'secondary-action': 'Refuse cookies',
...props.content
};

return (
<Box position="fixed" width="100%" bottom={0} p={4} zIndex="modal"
color="textSecondary" bgcolor="background.header">
<Container maxWidth="md" className={classes.container}>
<Typography variant="h5" component="h2" gutterBottom={true}
className={classes.header}>{content['header']}</Typography>
<Typography variant="subtitle1" color="textSecondary"
paragraph={true}>{content['description']}</Typography>
<Button variant="contained" color="primary"
className={classes.action}>{content['primary-action']}</Button>
<Button variant="outlined" color="primary"
className={classes.action}>{content['secondary-action']}</Button>
</Container>
</Box>
);
}