import {pluralNoun} from '@crumbs/core/text'
import {type Href} from 'expo-router'

import {Link} from '@/components/ui/link'
import {Text} from '@/components/ui/typography'
import {atoms as a, useTheme} from '@/sprinkles'

// a bold count with a muted noun, linking to the matching profile subscreen
export function ProfileMetric({
  count,
  noun,
  href,
  handle,
}: {
  count: number
  noun: string
  href?: Href
  handle: string
}) {
  const t = useTheme()
  const text = (
    <Text style={t.atoms.text_contrast_medium}>
      <Text style={[a.font_semi_bold, t.atoms.text]}>{count}</Text>{' '}
      {pluralNoun(count, noun)}
    </Text>
  )
  if (!href) return text
  return (
    <Link
      href={href}
      accessibilityLabel={`See @${handle}'s ${noun}s`}
      hitSlop={8}
    >
      {text}
    </Link>
  )
}
