import type {CrumbReactionSummary} from '@crumbs/core/schemas'

import {Text} from '@/components/ui/typography'
import {atoms as a} from '@/sprinkles'

// compact inline emoji tally (🔥3 👍), most-used first; renders nothing when
// there are no reactions
export const ReactionChips = ({
  reactions,
}: {
  reactions: CrumbReactionSummary[]
}) =>
  reactions.length > 0 ? (
    <Text emoji style={a.text_sm}>
      {reactions
        .map((r) => (r.count > 1 ? `${r.emoji}${r.count}` : r.emoji))
        .join(' ')}
    </Text>
  ) : null
