import React, { Component } from 'react'
import TypoGraphy from '@mui/material/Typography';
import Head from 'next/head';
import PropTypes from 'prop-types' //ES6
import styles from './styles.module.css';
import constants from '@/src/lib/constants'
import { useQuery, useMutation, gql } from "@apollo/client";

export default function PrivacyPolicy(props) {
        const GET_SITE_CONTENT = gql`
        query Get_Site_Content {
          site_contents(where: {content_id: {_eq: "PP"}}, order_by: {content: asc}) {
            id
            content_id
            content
          }
         }
       `;

        const { loading, error, data } = useQuery(GET_SITE_CONTENT);
        if (loading) return "Loading ...";
        if (error) return `Error! ${error.message}`;

        return (
            <div>
                <Head title="Privacy Policy" />
                <TypoGraphy paragraph='true' variant="body" color="inherit" >
                    {data.site_contents.map((site_content: { content: any; }) => (
                        <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
                    ))}
                </TypoGraphy>
            </div>
        )
    }
   