managarten/maerchenzauber/apps/mobile/components/atoms/Icon.tsx

import React from 'react';
import { Platform, View, StyleSheet } from 'react-native';
import { MaterialIcons, Ionicons, FontAwesome, FontAwesome5, AntDesign, Feather, MaterialCommunityIcons } from '@expo/vector-icons';
import { SymbolView, SymbolViewProps, SFSymbol } from 'expo-symbols';

export type IconSet = 'material' | 'ionicons' | 'fontawesome' | 'fontawesome5' | 'antdesign' | 'feather' | 'materialcommunity' | 'sf-symbols';

type IconNames = {
  material: keyof typeof MaterialIcons.glyphMap;
  ionicons: keyof typeof Ionicons.glyphMap;
  fontawesome: keyof typeof FontAwesome.glyphMap;
  fontawesome5: keyof typeof FontAwesome5.glyphMap;
  antdesign: keyof typeof AntDesign.glyphMap;
  feather: keyof typeof Feather.glyphMap;
  materialcommunity: keyof typeof MaterialCommunityIcons.glyphMap;
  'sf-symbols': SFSymbol;
};

interface BaseIconProps {
  size?: number;
  color?: string;
  style?: any;
  containerStyle?: 'round' | 'none';
  containerColor?: string;
  containerSize?: number;
}

interface MaterialIconProps extends BaseIconProps {
  set?: 'material';
  name: IconNames['material'];
}

interface IoniconsIconProps extends BaseIconProps {
  set: 'ionicons';
  name: IconNames['ionicons'];
}

interface FontAwesomeIconProps extends BaseIconProps {
  set: 'fontawesome';
  name: IconNames['fontawesome'];
}

interface FontAwesome5IconProps extends BaseIconProps {
  set: 'fontawesome5';
  name: IconNames['fontawesome5'];
}

interface AntDesignIconProps extends BaseIconProps {
  set: 'antdesign';
  name: IconNames['antdesign'];
}

interface FeatherIconProps extends BaseIconProps {
  set: 'feather';
  name: IconNames['feather'];
}

interface MaterialCommunityIconProps extends BaseIconProps {
  set: 'materialcommunity';
  name: IconNames['materialcommunity'];
}

interface SFSymbolIconProps extends BaseIconProps {
  set: 'sf-symbols';
  name: SFSymbol;
  weight?: SymbolViewProps['weight'];
  scale?: SymbolViewProps['scale'];
  renderingMode?: SymbolViewProps['type'];
}

type IconProps = 
  | MaterialIconProps
  | IoniconsIconProps
  | FontAwesomeIconProps
  | FontAwesome5IconProps
  | AntDesignIconProps
  | FeatherIconProps
  | MaterialCommunityIconProps
  | SFSymbolIconProps;

/**
 * Universal Icon component that supports multiple icon libraries
 * On iOS, it can use native SF Symbols for better integration
 *
 * @example
 * // Default (Material Icons)
 * <Icon name="home" size={24} color="white" />
 *
 * // Ionicons
 * <Icon set="ionicons" name="home" size={24} color="white" />
 *
 * // SF Symbols (iOS only)
 * <Icon set="sf-symbols" name="house.fill" size={24} color="white" />
 *
 * // With round container
 * <Icon set="ionicons" name="settings-outline" size={24} color="white" containerStyle="round" containerColor="rgba(255, 255, 255, 0.1)" />
 */
const Icon: React.FC<IconProps> = (props) => {
  const {
    size = 24,
    color = 'white',
    style,
    containerStyle = 'none',
    containerColor = 'rgba(255, 255, 255, 0.1)',
    containerSize,
    ...rest
  } = props;
  const set = props.set || 'material';

  // Render the actual icon
  const renderIcon = () => {
    // Use SF Symbols on iOS when available and requested
    if (set === 'sf-symbols') {
      if (Platform.OS === 'ios') {
        const sfProps = props as SFSymbolIconProps;
        return (
          <SymbolView
            name={sfProps.name}
            size={size}
            tintColor={color}
            weight={sfProps.weight}
            scale={sfProps.scale}
            type={sfProps.renderingMode || 'monochrome'}
            style={style}
          />
        );
      } else {
        // Fallback to Ionicons on non-iOS platforms
        const fallbackName = mapSFSymbolToIonicon(props.name as SFSymbol);
        return <Ionicons name={fallbackName} size={size} color={color} style={style} />;
      }
    }

    // Handle other icon sets
    switch (set) {
      case 'ionicons':
        return <Ionicons name={(props as IoniconsIconProps).name} size={size} color={color} style={style} />;
      case 'fontawesome':
        return <FontAwesome name={(props as FontAwesomeIconProps).name} size={size} color={color} style={style} />;
      case 'fontawesome5':
        return <FontAwesome5 name={(props as FontAwesome5IconProps).name} size={size} color={color} style={style} />;
      case 'antdesign':
        return <AntDesign name={(props as AntDesignIconProps).name} size={size} color={color} style={style} />;
      case 'feather':
        return <Feather name={(props as FeatherIconProps).name} size={size} color={color} style={style} />;
      case 'materialcommunity':
        return <MaterialCommunityIcons name={(props as MaterialCommunityIconProps).name} size={size} color={color} style={style} />;
      case 'material':
      default:
        return <MaterialIcons name={(props as MaterialIconProps).name} size={size} color={color} style={style} />;
    }
  };

  // Wrap in container if requested
  if (containerStyle === 'round') {
    const finalContainerSize = containerSize || size * 1.75;
    return (
      <View style={[
        styles.roundContainer,
        {
          width: finalContainerSize,
          height: finalContainerSize,
          borderRadius: finalContainerSize / 2,
          backgroundColor: containerColor,
        }
      ]}>
        {renderIcon()}
      </View>
    );
  }

  return renderIcon();
};

// Helper function to map SF Symbol names to Ionicons for non-iOS platforms
function mapSFSymbolToIonicon(sfSymbol: SFSymbol): keyof typeof Ionicons.glyphMap {
  // Common mappings - extend as needed
  const mappings: Record<string, keyof typeof Ionicons.glyphMap> = {
    'house.fill': 'home',
    'house': 'home-outline',
    'gear': 'settings-outline',
    'person.fill': 'person',
    'person': 'person-outline',
    'magnifyingglass': 'search',
    'plus': 'add',
    'minus': 'remove',
    'xmark': 'close',
    'checkmark': 'checkmark',
    'chevron.left': 'chevron-back',
    'chevron.right': 'chevron-forward',
    'chevron.up': 'chevron-up',
    'chevron.down': 'chevron-down',
    'arrow.left': 'arrow-back',
    'arrow.right': 'arrow-forward',
    'heart.fill': 'heart',
    'heart': 'heart-outline',
    'star.fill': 'star',
    'star': 'star-outline',
    'trash': 'trash-outline',
    'pencil': 'pencil',
    'square.and.arrow.up': 'share-outline',
    'doc.text': 'document-text-outline',
    'folder': 'folder-outline',
    'camera': 'camera-outline',
    'photo': 'image-outline',
    'envelope': 'mail-outline',
    'bell': 'notifications-outline',
    'bell.fill': 'notifications',
    'lock': 'lock-closed-outline',
    'lock.fill': 'lock-closed',
    'qrcode': 'qr-code',
    'water.waves': 'water',
    'sparkles': 'sparkles',
    'wand.and.stars': 'sparkles',
    'book': 'book-outline',
    'book.fill': 'book',
    'bubble.left': 'chatbubble-outline',
    'bubble.left.fill': 'chatbubble',
    'archivebox': 'archive-outline',
    'archivebox.fill': 'archive',
    'arrow.down.to.line': 'enter-outline',
    'rectangle.and.pencil.and.ellipsis': 'create-outline',
  };

  return mappings[sfSymbol] || 'help-circle-outline';
}

const styles = StyleSheet.create({
  roundContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Icon;