<script>
	import * as Tooltip from '$lib/components/ui/tooltip/index';
	import * as ToggleGroup from '$lib/components/ui/toggle-group/index';

	import { List, LayoutGrid } from '@lucide/svelte';

	let { view = $bindable(), class: className = '' } = $props();
</script>

<ToggleGroup.Root type="single" bind:value={view} class={className}>
	<Tooltip.Provider>
		<Tooltip.Root>
			<Tooltip.Trigger>
				{#snippet child({ props })}
					<ToggleGroup.Item value="grid" aria-label="Toggle grid view" {...props}>
						<LayoutGrid class="size-4" />
					</ToggleGroup.Item>
				{/snippet}
			</Tooltip.Trigger>
			<Tooltip.Content>
				<p>Grid view</p>
			</Tooltip.Content>
		</Tooltip.Root>
	</Tooltip.Provider>

	<Tooltip.Provider>
		<Tooltip.Root>
			<Tooltip.Trigger>
				{#snippet child({ props })}
					<ToggleGroup.Item value="list" aria-label="Toggle list view" {...props}>
						<List class="size-4" />
					</ToggleGroup.Item>
				{/snippet}
			</Tooltip.Trigger>
			<Tooltip.Content>
				<p>List view</p>
			</Tooltip.Content>
		</Tooltip.Root>
	</Tooltip.Provider>
</ToggleGroup.Root>
