/** Avatar.tsx — circular initials avatar with a deterministic brand colour. */
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { avatarColor, initials, colors } from '../theme';

interface Props {
  name: string;
  size?: number;
  light?: boolean; // white ring for dark call screens
}

export default function Avatar({ name, size = 96, light }: Props) {
  const bg = avatarColor(name || '?');
  return (
    <View
      style={[
        styles.wrap,
        {
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: bg,
          borderWidth: light ? 2 : 0,
          borderColor: 'rgba(255,255,255,0.25)',
        },
      ]}
    >
      <Text style={{ color: colors.white, fontSize: size * 0.38, fontWeight: '600' }}>
        {initials(name)}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: { alignItems: 'center', justifyContent: 'center' },
});