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

interface Props {
  name?: AssetName;
  /** 拍照 / 相册得到的本地图片 URI；有值时优先于 name 渲染 */
  uri?: string | null;
  size?: number;
  selected?: boolean;
  onPress?: () => void;
}

/** 圆形头像：预设占位图 / 真实图片；选中态加主色描边 */
export function Avatar({
  name = 'defaultAvatar',
  uri = null,
  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 },
      ]}
    >
      {uri ? (
        <Image source={{ uri }} style={{ width: size, height: size }} resizeMode="cover" />
      ) : (
        <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 },
});