import React from "react"

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

function hero() {
    const query = useStaticQuery(graphql`
        query MyQuery {
            directus {
                sections(
                    filter: {
                        components: { components_id: { type: { _eq: "hero" } } }
                    }
                ) {
                    components {
                        components_id {
                            title
                            subtitle
                            content
                            images {
                                directus_files_id {
                                    id
                                    imageFile {
                                        childImageSharp {
                                            gatsbyImageData
                                        }
                                        name
                                        publicURL
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    `)

    const infos = query.directus.sections[0].components[0].components_id

    let imageFondList = infos.images
    let imagesFond = [
        imageFondList.map((image: any) => {
            return { src: image.directus_files_id.imageFile }
        }),
    ]

    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 Bg {
    src: string
}
interface Props {
    title?: string
    subtitle?: string
    content?: string
    action?: Action
    services?: Array<Service>
    bgImage?: Array<Bg>
    size?: "xs" | "base" | "xl"
}
`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <h2>xs size :</h2>
            <Hero size="xs" bgImage={imagesFond[0]} />
            <h2>base size :</h2>
            <Hero size="base" bgImage={imagesFond[0]} />
            <br />
            <h2>xl size :</h2>
            <Hero size="xl" bgImage={imagesFond[0]} />
            <br />
        </Content>
    )
}

export default hero