import React from "react"
import {  } from "gatsby"
import { Content,Link, 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>;
    delay?: number;
  }
  
  const dataImage = [
    {
      src: logo1,
    },
    {
      src: logo2,
    },
    {
      src: logo3,
    },
    {
      src: logo4,
    },
    {
      src: logo5,
    },
];
`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div className="">
                <Carousel images={dataImage}  delay={3000} />
            </div>
            <div className="mt-5">
                <Carousel images={dataImage}  delay={6000} />
            </div>

        </Content>
    )
}

export default carousel