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

export interface Props {
  title?: string;
  content?: string;
  linkpath?: string;
  linktitle?: string;
}

const {
  title = await Astro.slots.render('title'),
  content = await Astro.slots.render('content'),
  linktitle = await Astro.slots.render('linktitle'),
  linkpath = await Astro.slots.render('linkpath'),
} = 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" /> {title}</span
    >
    {content}
    <a
      href={linkpath}
      target="_blank"
      class="text-blue-500 ltr:ml-auto rtl:mr-auto ml-auto bg-contain inline-block"
      title=""
    >
      {linktitle}
    </a>
  </div>
</section>
