<script lang="ts">
	import { Accordion as AccordionPrimitive } from 'bits-ui';
	import AccordionContent from './accordion-content.svelte';
	import { AccordionTrigger } from '.';
	import { cn } from '../../utils';

	let {
		ref = $bindable(null),
		class: className,
		title,
		children,
		contentClasses,
		triggerClasses,
		...restProps
	}: AccordionPrimitive.ItemProps & {
		title?: string;
		contentClasses?: string;
		triggerClasses?: string;
	} = $props();
</script>

<AccordionPrimitive.Item
	bind:ref
	class={cn('border-base-200 dark:border-base-800 border-b group', className)}
	{...restProps}
>
	{#if title}
		<AccordionTrigger class={triggerClasses}>{title}</AccordionTrigger>
		<AccordionContent class={contentClasses}>
			{@render children?.()}
		</AccordionContent>
	{:else}
		{@render children?.()}
	{/if}
</AccordionPrimitive.Item>
