---
import { clsx } from "clsx";

interface Props {
	level: number;
	icon?: string;
	heading?: string;
	xstyle?: string;
}

// level 0: info/note
// level 1: warning
// level 2: attn needed: oh fuck

const { level, icon, heading, xstyle } = Astro.props;
---

<div
	class={clsx(`text-black ${xstyle}`, {
		"bg-light-ye dark:bg-dark-ye": level === 0,
		"bg-light-or dark:bg-dark-or": level === 1,
		"bg-light-re dark:bg-dark-re": level === 2,
	})}
>
	<div class="flex items-center">
		{icon && <i class={`${icon} text-xl mr-2`}></i>}
		{heading && <h2 class="text-xl font-bold">{heading}</h2>}
	</div>
	<slot />
</div>