import type { HTMLAttributes } from 'react'
import type { SkeletonVariant } from '../Skeleton/types'

export enum AvatarSize {
    SM = 'sm',
    REGULAR = 'regular',
    MD = 'md',
    LG = 'lg',
    XL = 'xl',
}

export enum AvatarShape {
    CIRCULAR = 'circular',
    ROUNDED = 'rounded',
}

export enum AvatarOnlinePosition {
    TOP = 'top',
    BOTTOM = 'bottom',
}

export type AvatarProps = {
    src?: string
    alt?: string
    fallback?: React.ReactNode
    size?: AvatarSize
    shape?: AvatarShape
    online?: boolean
    onlinePosition?: AvatarOnlinePosition
    leadingSlot?: React.ReactNode
    trailingSlot?: React.ReactNode
    skeleton?: {
        show: boolean
        variant?: SkeletonVariant
    }
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>

export type StyledAvatarContainerProps = {
    $size: AvatarSize
    $shape: AvatarShape
    $hasImage: boolean
}

export type StyledAvatarIndicatorProps = {
    $size: AvatarSize
}