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

export default function PIP(props) {
    const GET_SITE_CONTENT = gql`
    query Get_Site_Content {
      site_contents(where: {content_id: {_eq: "PIP"}}, 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="Personal Information" />
            <TypoGraphy paragraph='true' variant="body" color="inherit" >

                {data.site_contents.map((site_content: { content: any; }) => (
                    <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
                ))}              
                </TypoGraphy>
        </div>
    )
}

PIP.propTypes = {

};
