import styles from './AvatarGroup.module.css'
import { Avatar } from '../../primitives/Avatar/Avatar'

interface AvatarGroupProps {
  names: string[]
  max?: number
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

export function AvatarGroup({ names, max = 3, size = 'md', className }: AvatarGroupProps) {
  const visible = names.slice(0, max)
  const overflow = names.length - visible.length

  return (
    <span className={`${styles.group} ${styles[size]} ${className ?? ''}`}>
      {visible.map((name, index) => (
        <Avatar
          key={`${name}-${index}`}
          name={name}
          size={size}
          className={`${styles.avatar} ${index === 0 ? styles.first : ''}`}
        />
      ))}
      {overflow > 0 && (
        <span className={`${styles.overflow} ${styles[`overflow_${size}`]}`}>
          +{overflow}
        </span>
      )}
    </span>
  )
}
