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: `${process.env.DIRECTUS_URL}assets/${partner.logo.id}` };
  });

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

export default Partners;