import { Image, ImageSourcePropType, StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import type { ComponentProps } from 'react';
import { colors } from '../../../src/theme';
import { ASSET_REGISTRY, AssetName } from '../assets';

type IconName = ComponentProps<typeof Ionicons>['name'];

interface Props {
  name: AssetName;
  size?: number;
  radius?: number;
  circle?: boolean;
}

/** 统一插画/Logo/头像占位：有真实图渲染图，否则渲染色块 + 图标 + 提示文字 */
export function Illustration({ name, size = 120, radius = 16, circle = false }: Props) {
  const def = ASSET_REGISTRY[name];
  const source: ImageSourcePropType | null = def.source;
  const r = circle ? size / 2 : radius;

  if (source) {
    return <Image source={source} style={{ width: size, height: size, borderRadius: r }} resizeMode="cover" />;
  }

  return (
    <View style={[styles.block, { width: size, height: size, borderRadius: r, backgroundColor: def.tint }]}>
      <Ionicons name={def.icon as IconName} size={size * 0.32} color={colors.primary} />
      {!circle && <Text style={styles.hint}>{def.hint}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  block: { alignItems: 'center', justifyContent: 'center', gap: 6, overflow: 'hidden' },
  hint: { fontSize: 11, color: colors.textHint, paddingHorizontal: 8, textAlign: 'center' },
});