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

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

<div
  class:list={[
    "rounded-2xl bg-blue-50 mb-6 dark:bg-blue-950/10 p-4 dark:ring-1 dark:ring-blue-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-blue-500"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
        ></path>
      </svg>
    </div>
    <div class="ml-3 flex items-start flex-col">
      <h3 class="text-sm font-medium text-blue-800 dark:text-blue-500">Note</h3>

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