import React from 'react';
import { StyleSheet } from 'react-native';
import type { ImageSourcePropType, StyleProp } from 'react-native';
import { Image, ImageStyle} from 'expo-image';

interface CustomIconProps {
  source: ImageSourcePropType;
  size?: number;
  color?: string;
  style?: StyleProp<ImageStyle>;
}

const CustomIcon: React.FC<CustomIconProps> = ({
  source,
  size = 24,
  color,
  style, 
}) => {
  const combinedStyle = StyleSheet.flatten([
    {
      width: size,
      height: size,
    },
    color && {tintColor: color},
    style,
  ]);

  return (
    <Image
      source={source}
      style={combinedStyle}
      contentFit="contain" 
      accessibilityRole="image" 
    />
  );
};

export default CustomIcon;