import React from "react"
import { graphql, useStaticQuery } from "gatsby"

import { Carousel } from "@onegeo-suite/gatsby-theme-onegeo"

interface Props {
    className?: string
    delay?: number
}

const Partners = (props: Props) => {
    const { className = "", delay = 2000 } = props

    const dataDirectus = useStaticQuery(graphql`
        query getPartners {
            directus {
                partners {
                    id
                    logo {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData
                            }
                            name
                            publicURL
                        }
                    }
                    name
                    url
                }
            }
        }
    `)

    const partners = dataDirectus.directus.partners
    const dataImage = partners.map((partner: any) => {
        return { src: partner.logo.imageFile }
    })

    return (
        <div className={`${className}`}>
            <Carousel images={dataImage} isLogo={true} delay={delay} />
        </div>
    )
}

export default Partners