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

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

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

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

  const dataDirectus = useStaticQuery(graphql`
    query myQuery {
      directus {
        partners {
          id
          logo {
            id
          }
          name
          url
        }
      }
    }
  `); 

  const partners = dataDirectus.directus.partners;
  const dataImage = partners.map((partner: any) => {
    return {src: `http://192.168.0.2:8055/assets/${partner.logo.id}`};
  });
  
  return (
    <div className={`${className}`}>
      <Carousel images={dataImage} isLogo={true} delay={delay} />
    </div>
  );
};

export default Partners;