import { Button } from '../core/Button';

export interface VehicleBarProps {
  /** Bold vehicle designation, e.g. "VW Touran Typ: 5T1". */
  model: string;
  /** Anchor the model links to, usually the vehicle table section, e.g. "#kwac-fahrzeuge". */
  modelHref?: string;
  /** Muted one-line facts, separated by " · " ; hidden below 740px. */
  facts?: string;
  /** Label of the compact blue pill on the right. */
  ctaLabel?: string;
  /** Target of the compact pill. */
  ctaHref?: string;
}

/**
 * Sticky, translucent vehicle strip (`.kwac-vbar`) directly under the header:
 * hairlines top and bottom, blurred backdrop, model name on the left, muted
 * facts in the middle and a compact `Button` on the right. Stays pinned to the
 * top while the listing scrolls.
 */
export function VehicleBar({
  model,
  modelHref = '#kwac-fahrzeuge',
  facts,
  ctaLabel = 'Kompatibilität prüfen',
  ctaHref = '#kwac-fahrzeuge',
}: VehicleBarProps) {
  return (
    <nav className="kwac-vbar" aria-label="Fahrzeugdaten">
      <div className="kwac-vbar-inner">
        <a className="kwac-vbar-model" href={modelHref}>
          {model}
        </a>
        {facts ? <span className="kwac-vbar-facts">{facts}</span> : null}
        <Button size="compact" href={ctaHref}>
          {ctaLabel}
        </Button>
      </div>
    </nav>
  );
}