import { Paragraph, styled } from 'tamagui'

// User-content typography primitives. Each consumes a semantic size token
// from the Halflight type ramp (`tamagui.config.ts`) via the `size` prop, so
// fontSize, lineHeight, letterSpacing, and fontWeight are pulled together —
// changing "what body text looks like" is a one-line edit in the config.
//
// Base is `Paragraph` (not `Text`) because Paragraph inherits the theme
// `color` token automatically, so call sites rarely need `color="..."` and
// the theme-switch path stays reactive without a `useTheme()` round-trip.

const tone = {
  default: { color: '$color' },
  secondary: { color: '$colorSecondary' },
  tertiary: { color: '$colorTertiary' },
  inverse: { color: '$colorInverse' },
  danger: { color: '$colorDanger' },
  link: { color: '$interactiveActive' },
} as const

const emphasis = {
  regular: { fontWeight: '400' },
  medium: { fontWeight: '500' },
  strong: { fontWeight: '600' },
  heavy: { fontWeight: '700' },
} as const

export const DisplayName = styled(Paragraph, {
  name: 'DisplayName',
  size: '$headline',
  fontWeight: '600',
  color: '$color',
  variants: { tone, emphasis } as const,
})

export const BodyText = styled(Paragraph, {
  name: 'BodyText',
  size: '$body',
  color: '$color',
  variants: { tone, emphasis } as const,
})

export const SubheadText = styled(Paragraph, {
  name: 'SubheadText',
  size: '$subhead',
  color: '$color',
  variants: { tone, emphasis } as const,
})

export const FootnoteText = styled(Paragraph, {
  name: 'FootnoteText',
  size: '$footnote',
  color: '$colorSecondary',
  variants: { tone, emphasis } as const,
})

export const CaptionText = styled(Paragraph, {
  name: 'CaptionText',
  size: '$caption',
  color: '$colorSecondary',
  variants: { tone, emphasis } as const,
})

export const MicroText = styled(Paragraph, {
  name: 'MicroText',
  size: '$micro',
  color: '$colorTertiary',
  variants: { tone, emphasis } as const,
})

// Timestamps, counts, anything where digits want consistent widths so they
// don't jitter as seconds tick over. iOS respects this natively; Android's
// coverage is partial but still better than proportional.
export const MetaText = styled(Paragraph, {
  name: 'MetaText',
  size: '$caption',
  color: '$colorSecondary',
  fontVariant: ['tabular-nums'],
  variants: { tone, emphasis } as const,
})

// Screen-level titles. The `size` prop lets callers pick `$title1`/`$title2`/
// `$title3` inline without declaring three separate components.
export const TitleText = styled(Paragraph, {
  name: 'TitleText',
  size: '$title3',
  fontWeight: '700',
  color: '$color',
  variants: { tone, emphasis } as const,
})
