import type { HTMLAttributes } from 'react'
import type { AvatarProps } from '../Avatar/types'
import { AvatarSize, AvatarShape } from '../Avatar/types'
import type { SkeletonVariant } from '../Skeleton/types'

export interface AvatarData extends Omit<AvatarProps, 'className' | 'id'> {
    id: string | number
    alt?: string
    fallback?: string | React.ReactNode
}

export type AvatarGroupProps = {
    avatars: AvatarData[]
    maxCount?: number
    size?: AvatarSize
    shape?: AvatarShape
    selectedAvatarIds?: (string | number)[]
    onSelectionChange?: (selectedIds: (string | number)[]) => void
    skeleton?: {
        show: boolean
        variant?: SkeletonVariant
    }
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>

export type StyledAvatarGroupContainerProps = {
    $spacing?: string
}

export type StyledAvatarWrapperProps = {
    $index: number
    $total: number
    $isSelected: boolean
    $size: AvatarSize
}

export type StyledOverflowCounterProps = {
    $size: AvatarSize
    $shape: AvatarShape
}