import React, { ReactElement } from "react"
import { graphql, PageProps } from "gatsby"

import { Content, Link ,Hero} from "@onegeo/gatsby-theme-onegeo"

function hero({ data }: PageProps): ReactElement {
    // @ts-ignore
    const site = data.site.siteMetadata

    return (
        <Content>
            <div className="prose">
                <Link to="/doc">Retour</Link>

                <h1>Hero</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`
interface Service {
    name: string;
    description: string;
    image: string;
    url: string;
}
interface Action {
    name: string;
    url: string;
}
interface Props {
  title: string;
  subtitle: string;
  content: string;
  action: Action;
  services: Array<Service>;
}

GraphQL query

  query {
    site {
      siteMetadata {
        title
        subtitle
        content: description
      }
    }
  }
`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <Hero {...site} />
        </Content>
    )
}

export default hero

export const query = graphql`
    query {
        site {
            siteMetadata {
                title
                subtitle
                content: description
            }
        }
    }
`