---
interface Props {
  type?: "default" | "info" | "warning" | "error";
}
const { type = "default" } = Astro.props;
let emoji = "💡";
if (type === "info") {
  emoji = "ℹ️";
} else if (type === "warning") {
  emoji = "⚠️";
} else if (type === "error") {
  emoji = "🚨";
}

const baseClasses = "relative my-4 flex rounded border p-3";
const typeClasses = {
  default:
    "border-orange-800 bg-orange-100 text-orange-950 dark:border-orange-200/20 dark:bg-orange-950/20 dark:text-orange-200",
  info: "border-blue-800 bg-blue-100 text-blue-950 dark:border-blue-200/20 dark:bg-blue-950/20 dark:text-blue-200",
  warning:
    "border-yellow-800 bg-yellow-100 text-yellow-950 dark:border-yellow-200/20 dark:bg-yellow-950/20 dark:text-yellow-200",
  error:
    "border-red-800 bg-red-100 text-red-950 dark:border-red-200/20 dark:bg-red-950/20 dark:text-red-200",
};
---

<div class:list={["not-prose", baseClasses, typeClasses[type]]}>
  <span class="pointer-events-none pr-3 text-xl select-none">{emoji}</span>
  <slot />
</div>
