---
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Icon } from "astro-icon/components";

export interface Props {
    icon?: string;
    title?: string;
    description?: string;
    href?: string;
}

const {
    icon = "tabler:info-square",
    title = await Astro.slots.render("title"),
    description = await Astro.slots.render("description"),
    href,
} = Astro.props;
---

<section class="bg-blue-50 dark:bg-slate-800 not-prose">
  {href ? (
    <a href={href} class="block no-underline hover:bg-blue-100 dark:hover:bg-slate-700 transition rounded-md">
      <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
        <Icon name={icon} class="w-5 h-5 inline-block align-text-bottom font-bold" />
        <span class="font-bold" set:html={title} />
        <Fragment set:html={description} />
      </div>
    </a>
  ) : (
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
      <Icon name={icon} class="w-5 h-5 inline-block align-text-bottom font-bold" />
      <span class="font-bold" set:html={title} />
      <Fragment set:html={description} />
    </div>
  )}
</section>
