import { Grid, Typography, Stack } from '@mui/material';
import { useIntl, FormattedMessage } from 'react-intl';
import usePageTitle from "components/usePageTitle";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png';

const BackgroundHead = {
  backgroundImage: `url(${titleBackgroundImg})`,
  width: '100%',
  height: '100%',
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat',
  backgroundColor: '#0C489E',
  backgroundPosition: 'right'
};

const PrivacyPolicy = () => {
  const intl = useIntl();
  // Localized document title/meta for Privacy Policy
  usePageTitle("privacyPolicy");
  const htmlContent = intl.formatMessage({ id: 'privacyPolicyContent', defaultMessage: '' });

  return (
    <Grid container justifyContent="center" alignItems="center">
      <Grid item xs={12}>
        <div style={BackgroundHead}>
          <Stack direction="row" height="70px" justifyContent="flex-start" alignItems="center">
            <Typography
              component="h1"
              ml={15}
              color="#FFF"
              variant="h4"
              sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}
            >
              <FormattedMessage id="privacyPolicy" />
            </Typography>
          </Stack>
        </div>
      </Grid>
      <Grid item xs={10} md={8} lg={6}>
        <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: htmlContent }} />
      </Grid>
    </Grid>
  );
};

export default PrivacyPolicy;
