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

	interface Props {
		title: string;
		buttonText?: string;
		buttonIcon?: 'plus' | 'edit' | 'none';
		onButtonClick?: () => void;
	}

	let { title, buttonText, buttonIcon = 'plus', onButtonClick }: Props = $props();
</script>

<div class="mb-4 flex items-center justify-between">
	<h2 class="text-lg font-semibold text-theme">{title}</h2>
	{#if onButtonClick && buttonText}
		<button
			type="button"
			onclick={onButtonClick}
			class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-primary-500 transition-colors hover:bg-primary-500/10"
		>
			{#if buttonIcon === 'plus'}
				<IconPlus />
			{:else if buttonIcon === 'edit'}
				<IconEdit />
			{/if}
			<span>{buttonText}</span>
		</button>
	{/if}
</div>
