import type {TrailMember} from '@crumbs/core/schemas'
import {View} from 'react-native'

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

const DISC_SIZE = 22
const MAX_DISCS = 3

export const AvatarStack = ({
  members,
  size = DISC_SIZE,
}: {
  members: TrailMember[]
  size?: number
}) => {
  const t = useTheme()
  if (!members.length) return null
  const shown = members.slice(0, MAX_DISCS)
  const overflow = members.length - shown.length
  const overlap = -Math.round(size / 4)

  return (
    <View style={a.flex_row}>
      {shown.map((member, i) => (
        <View
          key={member.handle}
          style={{marginLeft: i === 0 ? 0 : overlap}}
        >
          <Avatar
            handle={member.handle}
            uri={member.avatarUrl}
            size={size}
            borderColor={t.palette.bg}
          />
        </View>
      ))}
      {overflow > 0 && (
        <Text
          style={[
            t.atoms.text_contrast_medium,
            a.text_xs,
            a.ml_xs,
            a.align_self_center,
          ]}
        >
          +{overflow}
        </Text>
      )}
    </View>
  )
}
