<script lang="ts">
	import type { HTMLAttributes } from 'svelte/elements';
	import emblaCarouselSvelte from 'embla-carousel-svelte';
	import { getEmblaContext } from './context.js';
	import { cn } from '$lib/utils.js';

	type $$Props = HTMLAttributes<HTMLDivElement>;

	let className: string | undefined | null = undefined;
	export { className as class };

	const { orientation, options, plugins, onInit } = getEmblaContext('<Carousel.Content/>');
</script>

<div
	class="overflow-hidden"
	use:emblaCarouselSvelte={{
		options: {
			container: '[data-embla-container]',
			slides: '[data-embla-slide]',
			...$options,
			axis: $orientation === 'horizontal' ? 'x' : 'y'
		},
		plugins: $plugins
	}}
	on:emblaInit={onInit}
>
	<div
		class={cn('flex', $orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
		data-embla-container=""
		{...$$restProps}
	>
		<slot />
	</div>
</div>
