import type { ReactNode } from 'react';
import { cx } from './cx';

export interface TextProps {
  size?: 'body' | 'small';
  /** Secondary text and metadata. */
  muted?: boolean;
  /** Caps the line at a readable measure. Use it on every paragraph. */
  measure?: boolean;
  as?: 'p' | 'span' | 'div';
  children?: ReactNode;
}

/** Body copy and metadata. Short declarative sentences, with a full stop. */
export function Text({ size = 'body', muted, measure, as: Tag = 'p', children }: TextProps) {
  return (
    <Tag className={cx(size === 'small' ? 'small' : 'body', muted && 'muted', measure && 'measure')}>{children}</Tag>
  );
}