---
import { Icon } from 'astro-icon/components';

const { title = await Astro.slots.render('title'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
---

<section class="bg-blue-50 dark:bg-slate-800 not-prose">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
    <span class="font-bold">
      <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" />
      <Fragment set:html={title} />:</span
    >
    <Fragment set:html={subtitle} />
  </div>
</section>