import React from 'react'
import { Link } from "gatsby";

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


const carousel = () => {
    const dataImage = [
        {
          src: "https://placeimg.com/800/200/arch",
        },
        {
            src: "https://placeimg.com/800/200/arch",
        },
        {
            src: "https://placeimg.com/800/200/arch",
        },
        {
            src: "https://placeimg.com/800/200/arch",
        },

    ];
  return (
    <Content>
      <div className="prose">
        <Link to="/doc/core">Retour</Link>

        <h1>Carousel</h1>
        <h2>Props</h2>
        <div className="mockup-code">
          <pre>
            <code>
              {`
interface DataImage {
    src: string;
  }
  
  interface Props {
    images: Array<DataImage>;
    isLogo: boolean;
    delay?: number;
  }
  
  const dataImage = [
    {
      src: logo1,
    },
    {
      src: logo2,
    },
    {
      src: logo3,
    },
    {
      src: logo4,
    },
    {
      src: logo5,
    },
];
`}
            </code>
          </pre>
        </div>

        <h2>Example</h2>
      </div>
      <Carousel images = {dataImage} isLogo = {false} delay={3000}/>
    </Content>
  )
}

export default carousel