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

export default function TermsOfService(props) {
    const GET_SITE_CONTENT = gql`
    query Get_Site_Content {
      site_contents(where: {content_id: {_eq: "TOS"}}, 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="Terms Of Service" />
            <TypoGraphy paragraph='true' variant="body" color="inherit" >
                <div>
                    {data.site_contents.map((site_content: { content: any; }) => (
                        <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
                    ))}
                </div>
            </TypoGraphy>
        </div>
    )
}

TermsOfService.propTypes = {

};
