import type { ReactNode } from 'react';

export interface NoteDoc {
  label: string;
  href: string;
}

export interface NoteCardProps {
  /** Bold 19px heading, e.g. "Zur Anhängerkupplung". */
  title: string;
  /** Muted body copy with the caveats. */
  children: ReactNode;
  /** Tiny uppercase label above the document list, e.g. "Einbauanleitungen · 5 PDF-Dateien". */
  docsTitle?: string;
  /** Document links rendered as white rounded rows (`.kwac-doclist`), opened in a new tab. */
  docs?: NoteDoc[];
}

/**
 * Light-gray rounded note card (`.kwac-note`) for "good to know" caveats and
 * installation documents: heading, muted copy, an uppercase doc label and a
 * list of white link rows with trailing chevrons. Child of `NoteGrid`.
 */
export function NoteCard({ title, children, docsTitle, docs }: NoteCardProps) {
  return (
    <article className="kwac-note">
      <h3>{title}</h3>
      <p>{children}</p>
      {docsTitle ? <p className="kwac-note-doc-title">{docsTitle}</p> : null}
      {docs && docs.length ? (
        <ul className="kwac-doclist">
          {docs.map((d, i) => (
            <li key={d.href + i}>
              <a href={d.href} target="_blank" rel="nofollow noopener">
                {d.label}
                {' ›'}
              </a>
            </li>
          ))}
        </ul>
      ) : null}
    </article>
  );
}