---
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-500/5 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
        class="h-5 w-5 text-red-500"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
          clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="ml-3 flex items-center flex-col">
      <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
        {title ? title : <slot />}
      </h3>
      {
        title ? (
          <div class="mt-2 text-sm text-red-700 dark:text-red-400">
            <slot />
          </div>
        ) : null
      }
    </div>
  </div>
</div>