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

import Layout from "../layouts/layout";
// import Cards from "../../../gatsby-theme-news/src/components/cards";
import { Cards } from "@egeo/gatsby-theme-news";

function Index({ data }: PageProps): ReactElement {
  // @ts-ignore

  const sd = data.api.posts;
  const ct = data.site.siteMetadata;

  return (
    <Layout>
      <section>
        <div className="w-full bg-cover bg-center bg-fond h-160 z-0 pt-20">
          <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-20 lg:px-8">
            <h1 className="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
              <span className="block text-white">{ct.title}</span>
              <span className="block text-project-primary">{ct.subtitle}</span>
            </h1>
            <p className="mt-6 max-w-lg mx-auto text-center text-xl text-gray-200 sm:max-w-3xl">
              {ct.description}
            </p>
            <div className="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
              <div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-1 sm:gap-5">
                <Link
                  to="/404"
                  className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-extrabold rounded-md uppercase text-white bg-project-primary hover:bg-project-primaryHov sm:px-8"
                >
                  Découvrez nos cartes interactives
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div className="max-w-7xl mx-auto mt-20 px-5 text-gray-800 pb-10">
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12">
          {sd.map((file: any) => {
            return (
              <Cards
                id={file.id}
                title={file.title}
                content={file.content}
                image={file.image}
                image_url={file.image_url}
                author={file.author}
                creation={file.created_at}
                template="mamba"
              />
            );
          })}
        </div>
      </div>
      <div className="w-full text-center text-2xl mt-10">
        Gatsby Theme Core pour le portail eGEO
      </div>
    </Layout>
  );
}

export default Index;

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        subtitle
        description
      }
    }
    api {
      posts(
        limit: 3
        order_by: { created_at: desc }
        where: { published: { _eq: true } }
      ) {
        id
        title
        content
        keywords
        image_url
        author
        created_at
        published
      }
    }
  }
`;