import type { ReactNode } from 'react';

export interface FeatureProps {
  /** Bold 18px title, a spec noun phrase such as "Check-Control". */
  title: string;
  /** One muted sentence saying why it matters. */
  children: ReactNode;
}

/**
 * One plain feature entry (`.kwac-trio-item`): bold title and a muted
 * benefit line, no border or background. Child of `FeatureTrio`.
 */
export function Feature({ title, children }: FeatureProps) {
  return (
    <div className="kwac-trio-item">
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
}