---
interface Props {
  type?: "info" | "warning" | "error";
}

const { type = "info" } = Astro.props;

const styles = {
  info: "border-info-border bg-info-surface text-kumo-default",
  warning: "border-alert-border bg-alert-surface text-kumo-default",
  error: "border-error-border bg-error-surface text-kumo-default",
};
---

<div class:list={["rounded-lg border p-4 text-sm", styles[type]]}>
  <slot />
</div>
