<script lang="ts">
	import { IconEdit, IconTrash } from '$lib/components/icons';

	interface Props {
		editLabel?: string;
		deleteLabel?: string;
		size?: 'sm' | 'md';
		onEdit: () => void;
		onDelete: () => void;
	}

	let {
		editLabel = 'Edit',
		deleteLabel = 'Delete',
		size = 'md',
		onEdit,
		onDelete
	}: Props = $props();

	const buttonClass = size === 'sm' ? 'rounded p-1' : 'rounded p-1.5';
	const iconClass = size === 'sm' ? 'h-3 w-3' : '';
</script>

<div class="flex items-center gap-1">
	<button
		type="button"
		onclick={onEdit}
		class="{buttonClass} text-theme-secondary hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
		aria-label={editLabel}
	>
		<IconEdit class={iconClass} />
	</button>
	<button
		type="button"
		onclick={onDelete}
		class="{buttonClass} text-theme-secondary hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
		aria-label={deleteLabel}
	>
		<IconTrash class={iconClass} />
	</button>
</div>
