import type { ReactNode } from 'react';

export interface StatsRowProps {
  /** Exactly four `Stat`s look best (4 columns, 2x2 below 740px). */
  children: ReactNode;
  /** Accessible label of the strip. */
  ariaLabel?: string;
}

/**
 * Hairline-framed strip of key figures (`.kwac-stats`) under the hero: a
 * four-column grid of `Stat`s separated by vertical hairlines. Collapses to two
 * columns on phones.
 */
export function StatsRow({ children, ariaLabel = 'Kennzahlen' }: StatsRowProps) {
  return (
    <section className="kwac-stats" aria-label={ariaLabel}>
      <div className="kwac-stats-row">{children}</div>
    </section>
  );
}