---
import { Icon } from 'astro-icon/components';
import type { HomeSection } from '../../lib/data';
import Card from '../Card.astro';
import ExternalLink from '../ExternalLink.astro';
import Section from '../Section.astro';
import SectionHeading from '../SectionHeading.astro';

export interface Props {
  section: Extract<HomeSection, { type: 'cards' }>;
  alt: boolean;
}

const { section, alt } = Astro.props;
const headingId = `${section.id}-title`;
const display = (href: string) => {
  const u = new URL(href);
  return (u.host + u.pathname).replace(/^www\./, '').replace(/\/$/, '');
};
---

<Section id={section.id} alt={alt} labelledby={headingId}>
  <SectionHeading id={headingId} eyebrow={section.eyebrow} title={section.title} />
  <ul class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    {section.items.map((item) => (
      <li class="flex">
        <Card interactive class="w-full">
          <div class="flex flex-1 flex-col gap-4 p-6">
            <span class="bg-bg-alt text-fg inline-flex size-12 items-center justify-center">
              <Icon name={item.icon} class="size-6" aria-hidden="true" />
            </span>
            <h3 class="text-xl leading-snug font-bold">
              <ExternalLink
                href={item.href}
                icon={false}
                class="after:absolute after:inset-0 hover:underline"
              >
                {item.title}
              </ExternalLink>
            </h3>
            {item.description && <p class="text-fg-muted text-sm">{item.description}</p>}
            <p class="text-accent-text mt-auto inline-flex items-center gap-1 text-sm font-semibold">
              {display(item.href)}
              <Icon name="tabler:external-link" class="size-4" aria-hidden="true" />
            </p>
          </div>
        </Card>
      </li>
    ))}
  </ul>
</Section>