---
import type { SlCarouselItem } from '@shoelace-style/shoelace';
import type { HTMLAttributes } from 'astro/types';

interface Props extends Omit<SlCarouselItem, any>, Partial<HTMLAttributes<'div'>> {
    /** The index of the item in the carousel. */
    index?: number;
}

const { index, ...rest } = Astro.props;
---
<sl-carousel-item {index} {...rest}>
    <slot />
</sl-carousel-item>

<script>
    import '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js';
</script>