import React from "react"
import {  } from "gatsby"
import { Content,Link, Carousel } from "@onegeo/gatsby-theme-onegeo"


const carousel = () => {
    const dataImage = [
        {
            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
        },
        {
            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
        },
        {
            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
        },
        {
            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
        },
    ]
    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;
    fullSize?: boolean
  }
  
  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} />
            <Carousel images={dataImage} isLogo={true} delay={2000} fullSize={true}/>
        </Content>
    )
}

export default carousel