import React from 'react';
import { View, Text } from 'react-native';
import { cn } from '@/lib/utils';

/** Deterministic color from a string */
function colorFor(str: string): string {
  const colors = [
    'bg-blue-600', 'bg-purple-600', 'bg-green-600',
    'bg-pink-600',  'bg-orange-600', 'bg-teal-600',
    'bg-red-600',   'bg-indigo-600', 'bg-cyan-600',
  ];
  let h = 0;
  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
  return colors[h % colors.length];
}

interface AvatarProps {
  name?:      string;
  size?:      'sm' | 'md' | 'lg';
  className?: string;
}

const sizeMap = {
  sm: { outer: 'w-8 h-8',   text: 'text-sm'  },
  md: { outer: 'w-10 h-10', text: 'text-base' },
  lg: { outer: 'w-14 h-14', text: 'text-xl'  },
};

export function Avatar({ name = '?', size = 'md', className }: AvatarProps) {
  const initials = name.slice(0, 2).toUpperCase();
  const { outer, text } = sizeMap[size];
  return (
    <View className={cn(outer, colorFor(name), 'rounded-full items-center justify-center', className)}>
      <Text className={cn(text, 'text-white font-bold')}>{initials}</Text>
    </View>
  );
}