import type { ReactNode } from 'react';

export interface SummaryProps {
  /** One or two plain sentences describing the product for machines and screen readers. */
  children: ReactNode;
}

/**
 * Quiet one-line product summary at the very top of the listing
 * (`.kwac-summary`): small, centered, light-gray text carrying schema.org
 * `Product` / `description` markup. Place it first inside `Page`, before `Header`.
 */
export function Summary({ children }: SummaryProps) {
  return (
    <div className="kwac-summary" vocab="https://schema.org/" typeof="Product">
      <span property="description">{children}</span>
    </div>
  );
}