import type { ReactNode } from 'react';
import { cx } from '../_internal/cx';

export interface LoadBar {
  /** Row label, e.g. "Anhängelast". */
  label: string;
  /** Displayed value, e.g. "1.800 kg". */
  value: string;
  /** Bar length as a share of the longest bar: `100` or `4` (4.2 %, the 75 kg nose weight against 1.800 kg). Widths are fixed classes, no inline styles. */
  width: 100 | 4;
  /** Light-blue fill for the reference bar; the others stay gray. */
  accent?: boolean;
}

export interface LoadComparisonProps {
  /** Tiny uppercase eyebrow, e.g. "Leistung". */
  eyebrow?: string;
  /** Left-aligned statement headline. */
  statement: ReactNode;
  /** Muted copy under the statement. */
  copy?: ReactNode;
  /** Two rows in the template: towing load (accent) and nose weight. */
  bars: LoadBar[];
  /** Small footnote under the bars, e.g. "Balken maßstäblich zur Anhängelast." */
  note?: string;
}

/**
 * Dark, left-aligned comparison band (`.kwac-compare`): eyebrow, statement,
 * copy and horizontal pill bars (`.kwac-bars`) that put the towing load and the
 * nose weight in proportion and explain what each one means for the buyer. Sits between the
 * feature band and the detail band of the long product page.
 */
export function LoadComparison({ eyebrow, statement, copy, bars, note }: LoadComparisonProps) {
  return (
    <section className="kwac-compare" aria-labelledby="kwac-compare-title">
      <div className="kwac-compare-inner">
        {eyebrow ? <p className="kwac-compare-eyebrow">{eyebrow}</p> : null}
        <h2 className="kwac-statement" id="kwac-compare-title">
          {statement}
        </h2>
        {copy ? <p className="kwac-compare-copy">{copy}</p> : null}
        <div className="kwac-bars">
          {bars.map((b) => (
            <div className="kwac-bar" key={b.label}>
              <span className="kwac-bar-label">{b.label}</span>
              <span className="kwac-bar-track">
                <span className={cx('kwac-bar-fill', b.accent && 'kwac-bar-fill-accent', `kwac-bar-fill-${b.width}`)} />
              </span>
              <span className="kwac-bar-value">{b.value}</span>
            </div>
          ))}
        </div>
        {note ? <p className="kwac-compare-note">{note}</p> : null}
      </div>
    </section>
  );
}