<script lang="ts">
	import Ellipsis from "@lucide/svelte/icons/ellipsis";
	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
	import { Button } from "$lib/components/ui/button";

	let {
		actions,
	}: {
		actions: {
			title: string;
			action: () => void;
		}[];
	} = $props();
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		{#snippet child({ props })}
			<Button
				{...props}
				variant="ghostGhosted"
				size="icon"
				class="relative h-8 w-8 p-0"
			>
				<span class="sr-only">Open menu</span>
				<Ellipsis class="h-4 w-4" />
			</Button>
		{/snippet}
	</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		{#each actions as action}
			<DropdownMenu.Item onclick={action.action}>
				<p>
					{action.title}
				</p>
			</DropdownMenu.Item>
		{/each}
	</DropdownMenu.Content>
</DropdownMenu.Root>
