---
interface Props {
  title: string;
  class?: string;
}

const { title, class: className } = Astro.props;
---

<div
  class:list={[
    "rounded-2xl bg-red-50 mb-6 dark:bg-red-950/10 p-4 dark:ring-1 dark:ring-red-500/10 not-prose max-w-full",
    className,
  ]}
>
  <div class="flex">
    <div class="flex-shrink-0">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-5 text-red-500"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
        ></path>
      </svg>
    </div>
    <div class="ml-3 flex items-start flex-col">
      <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
        Caution
      </h3>

      <div
        class="text-sm text-red-700 dark:text-red-400 [&_p]:mt-2 [&_a]:font-bold [&_a]:text-red-700 dark:[&_a]:text-red-300"
      >
        <slot />
      </div>
    </div>
  </div>
</div>