<script lang="ts">
	interface Warning {
		title: string;
		explanation: string;
	}

	let { warnings }: { warnings: Warning[] } = $props();
</script>

{#each warnings as warning}
	<div
		data-testid="warning-card"
		class="rounded-[var(--radius-lg)] border border-[var(--yellow-light)] bg-[var(--yellow-tint)] px-4 py-3"
	>
		<p class="font-[var(--font-sans)] text-[13px] font-medium text-[var(--yellow-text)]">
			{warning.title}
		</p>
		<p class="mt-1 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">
			{warning.explanation}
		</p>
	</div>
{/each}
