---
/**
 * AffiliateCardSection — a titled band of AffiliateCards. `items` arrive resolved and in their final order; every
 * item renders (no cap). Up to 4 columns: a fifth item wraps onto a new row rather than narrowing the cards, and
 * `sizes` follows the column count actually rendered. `cardOptions` reach every card (labels, thresholds, classes);
 * the disclosure arrives through the `disclosure` slot.
 */
import AffiliateCard from './AffiliateCard.astro';
import AffiliateBandShell from './AffiliateBandShell.astro';
import { bandImageSizes } from './band';
import type { AffiliateCardItem, AffiliateCardOptions } from './types';
import { LABELS } from '../internal/labels';

interface Props {
  items: AffiliateCardItem[];
  title?: string;
  subtitle?: string;
  placement?: string;
  imageFetchpriority?: 'high' | 'low' | 'auto';
  cardOptions?: AffiliateCardOptions;
  sectionClass?: string;
  headingClass?: string;
  id?: string;
  class?: string;
}

const {
  items,
  title = LABELS.affiliateCardSection.title,
  subtitle,
  placement,
  imageFetchpriority,
  cardOptions = {},
  sectionClass,
  headingClass,
  id,
  class: className,
} = Astro.props;

const visible = (items ?? []).map(({ id: _id, ...item }) => item);

const imageSizes = bandImageSizes(visible.length);
---

{
  visible.length > 0 && (
    <AffiliateBandShell title={title} subtitle={subtitle} count={visible.length} sectionClass={sectionClass} headingClass={headingClass} id={id} class={className}><slot name="disclosure" slot="disclosure" />{visible.map((item, index) => (
        <AffiliateCard
          {...cardOptions}
          {...item}
          index={index}
          placement={placement}
          imageSizes={imageSizes}
          imageFetchpriority={imageFetchpriority}
        />
      ))}</AffiliateBandShell>
  )
}