import React, { useMemo } from 'react';
import { View, Text } from '@tarojs/components';
import './index.scss';

type AvatarColor = 'pri' | 'acc' | 'wrn' | 'dan';

interface AvatarCircleProps {
  name: string;
  size?: number;
  color?: AvatarColor;
  className?: string;
}

const COLOR_MAP: Record<AvatarColor, { bg: string; fg: string }> = {
  pri: { bg: '#D4E5F0', fg: '#3A6B8C' },
  acc: { bg: '#E8F0E8', fg: '#5B7A5E' },
  wrn: { bg: '#FFF3E0', fg: '#C4873A' },
  dan: { bg: '#FDEAEA', fg: '#B54A4A' },
};

const AvatarCircle: React.FC<AvatarCircleProps> = ({
  name,
  size = 44,
  color = 'pri',
  className = '',
}) => {
  const initial = useMemo(() => name?.charAt(0) || '?', [name]);
  const colorStyle = COLOR_MAP[color];

  const cls = ['avatar-circle', className].filter(Boolean).join(' ');

  return (
    <View
      className={cls}
      style={{
        width: `${size}px`,
        height: `${size}px`,
        borderRadius: `${size / 2}px`,
        background: colorStyle.bg,
      }}
    >
      <Text
        className="avatar-circle__text"
        style={{ color: colorStyle.fg, fontSize: `${Math.round(size * 0.4)}px` }}
      >
        {initial}
      </Text>
    </View>
  );
};

export default React.memo(AvatarCircle);