---
/**
 * AffiliateCarousel — a CardCarousel strip of AffiliateCards, chosen by `selectActivities`. With `ids`, the strip
 * renders exactly those activities in that running order (an editor's list, `exclusive`; an activity's numeric id is
 * its `id` without a non-digit prefix, so `gyg-12`, `x-12` and `12` all match 12). Without, the most reviewed come
 * first, titles deduplicated so near-duplicate listings don't eat the strip. Either way at most `maxCards`. `resolve`
 * turns a visible activity into the card's props (called only for the cards rendered); without it each activity
 * already is one. The disclosure arrives through the `disclosure` slot.
 */
import CardCarousel from '../composed/CardCarousel.astro';
import AffiliateCard from './AffiliateCard.astro';
import { selectActivities } from './select';
import type { AffiliateCardItem, AffiliateCardOptions } from './types';
import { LABELS } from '../internal/labels';

type Activity = { id?: string | number; title?: string; reviewCount?: number; [key: string]: unknown };

interface Props {
  activities: Activity[];
  ids?: number[];
  resolve?: (activity: any) => AffiliateCardItem;
  heading?: string;
  subtitle?: string;
  headingTag?: 'h2' | 'h3';
  headingClass?: string;
  id?: string;
  maxCards?: number;
  placement?: string;
  imageSizes?: string;
  cardOptions?: AffiliateCardOptions;
  class?: string;
}

const {
  activities,
  ids,
  resolve = (activity) => activity as AffiliateCardItem,
  heading = LABELS.affiliateCarousel.heading,
  subtitle,
  headingTag = 'h3',
  headingClass = 'font-display text-lg font-semibold text-foreground',
  id,
  maxCards = 4,
  placement = 'carousel',
  imageSizes,
  cardOptions = {},
  class: className,
} = Astro.props;

const idOf = (activity: Activity) => Number(String(activity.id ?? '').replace(/^\D+-/, ''));

const shown = selectActivities(
  activities,
  ids ? { pinnedIds: ids, exclusive: true, match: (a, wanted) => idOf(a) === wanted, maxCards } : { dedupeTitles: true, maxCards },
);

const visible = shown.map((a) => {
  const { id: _id, ...item } = resolve(a);
  return item;
});
---

{
  visible.length > 0 && (
    <div class:list={["my-6", className]}>
      <CardCarousel
        heading={heading}
        headingTag={headingTag}
        headingClass={headingClass}
        description={subtitle}
        id={id}
        ariaLabel={heading}
      >
        <slot name="disclosure" slot="header-note" />
        {visible.map((item, index) => (
          <div class="snap-start shrink-0 w-[78vw] sm:w-72">
            <AffiliateCard
              {...cardOptions}
              {...item}
              placement={placement}
              imageSizes={imageSizes}
              index={index}
            />
          </div>
        ))}
      </CardCarousel>
    </div>
  )
}