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

import { Content } from "@onegeo/gatsby-theme-onegeo";
import { 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/core">Retour</Link>

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

GraphQL query

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

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

export default hero;

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