import type { ReactNode } from 'react';

export interface FitNoticeProps {
  /** Bold one-line title, e.g. "Bitte prüfen Sie vor dem Kauf Ihr Fahrzeug." */
  title: ReactNode;
  /** Muted explanatory copy; may contain an inline `TextLink variant="inline"`. */
  children: ReactNode;
}

/**
 * Left-aligned fit warning card (`.kwac-fit`): rounded 18px, hairline border,
 * bold title and muted copy, max 680px, centered under a statement. Use it
 * wherever the buyer must verify vehicle compatibility before purchase.
 */
export function FitNotice({ title, children }: FitNoticeProps) {
  return (
    <aside className="kwac-fit" aria-label="Passungshinweis">
      <p className="kwac-fit-title">{title}</p>
      <p className="kwac-fit-copy">{children}</p>
    </aside>
  );
}