---
// Define props from Astro
const { title, subTitle, partners } = Astro.props;

interface Partner {
  icon: any;
  name?: string;
  href?: string;
}

// Define TypeScript interface for props
interface Props {
  title: string;
  subTitle?: string;
  partners: Partner[];
}

const visiblePartners = partners.filter(
  partner => partner.href && partner.icon
);
---

<section
  class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
>
  {/* Title and description */}
  <div class="mx-auto mb-6 w-full space-y-1 text-center sm:w-1/2 lg:w-1/3">
    <h2
      class="text-2xl leading-tight font-bold text-balance text-neutral-800 sm:text-3xl dark:text-neutral-200"
    >
      {title}
    </h2>
    {
      subTitle && (
        <p class="leading-tight text-pretty text-neutral-600 dark:text-neutral-400">
          {subTitle}
        </p>
      )
    }
  </div>
  <div
    class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
  >
    {/* Clients Group SVGs */}
    {
      visiblePartners.map(partner => (
        <a
          href={partner.href}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={partner.name}
        >
          <div set:html={partner.icon} />
        </a>
      ))
    }
  </div>
</section>