export interface MoreOfferCardProps {
  /** Listing URL, opened in a new tab. */
  href: string;
  /** Product image shown square and contained on the dark tile. */
  src: string;
  /** Accessible name of the whole tile, e.g. "Weiteres Angebot 1 anzeigen". */
  ariaLabel: string;
  /** Blue action line under the tile; defaults to "Angebot anzeigen". */
  label?: string;
}

/**
 * Linked product tile (`.kwac-more-card`): the image sits on a near-black
 * rounded media block (`.kwac-more-media`), a semibold blue action line with a
 * chevron follows. Child of `MoreOffers`.
 */
export function MoreOfferCard({ href, src, ariaLabel, label = 'Angebot anzeigen' }: MoreOfferCardProps) {
  return (
    <a className="kwac-more-card" href={href} target="_blank" rel="nofollow noopener" aria-label={ariaLabel}>
      <span className="kwac-more-media">
        <img src={src} loading="lazy" alt="" />
      </span>
      <span className="kwac-more-action">
        {label}
        {' ›'}
      </span>
    </a>
  );
}