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

interface Item {
  title?: string;
  description?: string;
  icon?: string;
}

export interface Props {
  title?: string;
  subtitle?: string;
  highlight?: string;
  items: Array<Item>;
}

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

<section class="relative">
  <div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 -mb-12">
    <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
      {
        (title || subtitle || highlight) && (
          <div class="mb-8 md:mx-auto text-center max-w-3xl">
            {highlight && (
              <p
                class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
                set:html={highlight}
              />
            )}
            {title && (
              <h2
                class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
                set:html={title}
              />
            )}

            {subtitle && (
              <p
                class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400"
                set:html={subtitle}
              />
            )}
          </div>
        )
      }
      <div class={`grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 my-12 dark:text-white items-stretch`}>
        {
          items.map(({ title, description, icon }) => (
            <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
              <div class="flex items-center">
                <Icon name={icon} class="w-10 h-10" />
                <div class="ml-4 text-xl font-bold">{title}</div>
              </div>
              {description && <p class="text-muted dark:text-gray-400 text-md mt-4" set:html={description} />}
            </div>
          ))
        }
      </div>
    </div>
  </div>
</section>