import { html } from 'lit-html'

export default {
    title: 'Bootstrap/Carousel',
    component: 'bs-carousel',
}

export const example = () => html` <bs-carousel controls="true" indicators="true" style="width: 500px"> ${renderSlides()} </bs-carousel> `

export const slidesOnly = () => html` <bs-carousel style="width: 500px"> ${renderSlides()} </bs-carousel> `

export const withControls = () => html` <bs-carousel controls="true" style="width: 500px"> ${renderSlides()} </bs-carousel> `

export const withIndicators = () => html` <bs-carousel controls="true" indicators="true" style="width: 500px"> ${renderSlides()} </bs-carousel> `

export const crossfade = () => html` <bs-carousel controls="true" indicators="true" animation="fade" style="width: 500px"> ${renderSlides()} </bs-carousel> `

function renderSlides() {
    return html`
        <img src="https://via.placeholder.com/500.png?text=Slide 1" />
        <img src="https://via.placeholder.com/500.png?text=Slide 2" />
        <img src="https://via.placeholder.com/500.png?text=Slide 3" />
        <img src="https://via.placeholder.com/500.png?text=Slide 4" />
        <img src="https://via.placeholder.com/500.png?text=Slide 5" />
    `
}
