import { makeStyles, tokens } from '@fluentui/react-components'

/**
 * Shared text-role styles + the app's type-role convention (Batch 7).
 *
 * The renderer had drifted on typography: the one muted color was re-declared under
 * eight class names (L110), row titles were rendered as three different components
 * (L114), and `Caption1`/`Body1`/`Text` were applied by feel (L123/L124). The
 * convention below makes the roles explicit; this module supplies the two styles
 * that back it.
 *
 * Type roles — reach for the Fluent type component, add `muted` for secondary color:
 * - `<Subtitle2>` — screen titles and settings-section headers (via `ScreenHeader`
 *   and each settings card's header).
 * - `<Text>` — the one row/item title component (add `title` for the semibold,
 *   single-line-with-ellipsis treatment). Previously split across `<Text>`, a bare
 *   `<span>`, and `<Caption1>` (L114).
 * - `<Body1>` — body copy: empty-state messages, onboarding prose, gated notices.
 *   Not for titles or metadata (L124).
 * - `<Caption1>` — small secondary text: metadata, hints, counts, timestamps. One
 *   role doing several closely-related jobs, all "small secondary text" (L123).
 */
export const useTextStyles = makeStyles({
  /**
   * The single muted / secondary-text color (L110) — was re-declared as
   * hint/sub/meta/srcSub/stats/count/emptyHint/previewMeta. Merge onto a `<Caption1>`
   * or `<Text>`, or use alone where the element sets no other style.
   */
  muted: {
    color: tokens.colorNeutralForeground3
  },
  /** The shared row/item title treatment (L114): semibold, single line, ellipsis. */
  title: {
    fontWeight: tokens.fontWeightSemibold,
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  },
  /**
   * The single-line truncation utility (L126): clip overflowing text to one line
   * with an ellipsis. This is `title` without the semibold weight — for metadata
   * and non-title text that should truncate rather than wrap. Needs `minWidth: 0`
   * so it can shrink inside a flex row.
   */
  truncate: {
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }
})
