/**
 * Avatar Component - Lynx 版 MUI Avatar
 * 头像组件
 */
import './Avatar.css'

export type AvatarVariant = 'circular' | 'rounded' | 'square'

export interface AvatarProps {
  /** 头像图片地址 */
  src?: string
  /** 替代文本 */
  alt?: string
  /** 变体 */
  variant?: AvatarVariant
  /** 宽度 */
  width?: number
  /** 高度 */
  height?: number
  /** 背景颜色 */
  bgcolor?: string
  /** 子元素 (通常是文字或图标) */
  children?: any
  /** 自定义类名 */
  className?: string
  /** 内联样式 */
  style?: Record<string, any>
  /** sx 属性 */
  sx?: Record<string, any>
  /** 点击事件 */
  bindtap?: () => void
}

// 变体边框半径
const variantRadius: Record<AvatarVariant, number | string> = {
  circular: '50%',
  rounded: 8,
  square: 0,
}

export function Avatar({
  src,
  alt,
  variant = 'circular',
  width = 40,
  height = 40,
  bgcolor = '#667eea',
  children,
  className,
  style,
  sx,
  ...props
}: AvatarProps) {
  const borderRadius = variantRadius[variant]

  const computedStyle: Record<string, any> = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width,
    height,
    borderRadius,
    backgroundColor: src ? 'transparent' : bgcolor,
    overflow: 'hidden',
    ...sx,
    ...style,
  }

  const classes = [
    'MuiAvatar-root',
    `MuiAvatar-${variant}`,
    src && 'MuiAvatar-img',
    className,
  ].filter(Boolean).join(' ')

  return (
    <view className={classes} style={computedStyle} {...props}>
      {src ? (
        <image 
          src={src} 
          className="MuiAvatar-img"
          style={{ width: '100%', height: '100%' }}
        />
      ) : children ? (
        <text className="MuiAvatar-fallback">{children}</text>
      ) : (
        <text className="MuiAvatar-fallback">?</text>
      )}
    </view>
  )
}

export default Avatar