import type { ComponentProps } from 'react'
import { styled, Text, XStack } from 'tamagui'

// CharCountText — the bold 12pt secondary-coloured number used in the
// composer / reply-composer char counter ("{n} / {max}"). Extracted so the
// two composers share one text style.
export const CharCountText = styled(Text, {
  name: 'CharCountText',
  allowFontScaling: false,
  fontWeight: 'bold',
  fontSize: 12,
  color: '$colorSecondary',
})

// Compound: renders "{current}/{max}" in a single row. Use when the two
// numbers sit side by side without anything between them (the common case).
// `tone="danger"` flips the trio to `$red10` for over-limit affordances —
// shared by the post composer's caption counter and any future call site
// that needs the same red-on-overflow signal.
export function CharCount({
  current,
  max,
  tone = 'default',
  ...rest
}: {
  current: number
  max: number
  tone?: 'default' | 'danger'
} & Omit<ComponentProps<typeof XStack>, 'children'>) {
  const color = tone === 'danger' ? '$red10' : '$colorSecondary'
  return (
    <XStack {...rest}>
      <CharCountText color={color}>{current}</CharCountText>
      <CharCountText color={color}>/</CharCountText>
      <CharCountText color={color}>{max}</CharCountText>
    </XStack>
  )
}
