import { forwardRef } from 'react';
import { Text, View } from 'react-native';
import type { RsSkinlessIconProps } from '../../types/props';

type ViewRef = View;

/**
 * Skinless icon primitive.
 * Renders the icon `name` as text. The skinning layer is expected to
 * replace or augment this with the actual icon font/component for the
 * chosen `source` family (feather, material, ionicons).
 */
const RsIcon = forwardRef<ViewRef, RsSkinlessIconProps>(
  ({ name, size = 24, style }, ref) => {
    return (
      <View
        ref={ref}
        style={[
          { width: size, height: size, alignItems: 'center', justifyContent: 'center' },
          style,
        ]}
        accessibilityRole="image"
        accessibilityLabel={name}
      >
        <Text style={{ fontSize: size }}>{name}</Text>
      </View>
    );
  }
);

RsIcon.displayName = 'RsIcon';

export default RsIcon;