<script lang="ts">
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { OutlineIconName } from '$lib/components/ui/OutlineIcon.svelte';

	type Tone = 'violet' | 'emerald' | 'rose';

	interface Props {
		title: string;
		subtitle?: string;
		icon?: OutlineIconName;
		tone?: Tone;
	}

	let { title, subtitle = '', icon, tone = 'violet' }: Props = $props();

	const toneAlertClass: Record<Tone, string> = {
		violet: 'border-violet-400 bg-violet-600 text-white',
		emerald: 'border-emerald-400 bg-emerald-600 text-white',
		rose: 'border-rose-400 bg-rose-600 text-white'
	};

	const toneIconClass: Record<Tone, string> = {
		violet: 'icon-ring-on-dark',
		emerald: 'icon-ring-on-dark',
		rose: 'icon-ring-on-dark'
	};
</script>

<div
	class="alert min-h-0 rounded-xl border-2 px-4 py-3 shadow-sm {icon
		? toneAlertClass[tone]
		: 'border-base-300 bg-base-200/70 text-base-content'}"
>
	{#if icon}
		<div class="flex w-full items-start gap-3">
			<span class="icon-ring icon-ring-rounded icon-ring-sm {toneIconClass[tone]}">
				<OutlineIcon name={icon} size="sm" />
			</span>
			<div class="min-w-0 flex-1">
				<h2 class="text-lg font-bold">{title}</h2>
				{#if subtitle}
					<p class="text-sm opacity-70">{subtitle}</p>
				{/if}
			</div>
		</div>
	{:else}
		<p class="w-full text-sm font-semibold">{title}</p>
	{/if}
</div>
