import { Pressable, StyleSheet, View } from 'react-native';
import { colors } from '../../../src/theme';
import { Illustration } from './Illustration';
import type { AssetName } from '../assets';

interface Props {
  name?: AssetName;
  size?: number;
  selected?: boolean;
  onPress?: () => void;
}

/** 圆形头像占位：默认头像剪影 / 真实图；选中态加主色描边 */
export function Avatar({ name = 'defaultAvatar', size = 64, selected = false, onPress }: Props) {
  const content = (
    <View
      style={[
        styles.wrap,
        { width: size, height: size, borderRadius: size / 2, borderColor: selected ? colors.primary : colors.border },
      ]}
    >
      <Illustration name={name} size={size} circle />
    </View>
  );
  if (onPress) return <Pressable onPress={onPress} hitSlop={6}>{content}</Pressable>;
  return content;
}

const styles = StyleSheet.create({
  wrap: { borderWidth: 2, overflow: 'hidden', backgroundColor: colors.white },
});