import React from 'react'
import { Carousel } from './Carousel.jsx'
import { View } from '../view/index.js'

export default {
  title: 'Design System/Display/Carousel',
  component: Carousel,
  render: () => (
    <Carousel childWidth="80%" childMaxWidth="400px">
      <View surface="secondary" inset="m" roundness="s" style={{ height: '200px' }}>1</View>
      <View surface="secondary" inset="m" roundness="s" style={{ height: '200px' }}>2</View>
      <View surface="secondary" inset="m" roundness="s" style={{ height: '200px' }}>3</View>
    </Carousel>
  ),
}

export const Default = {}