managarten/nutriphi/apps/mobile/components/ui/SFSymbol.tsx

import React from 'react';
import { Platform } from 'react-native';
import { SymbolView, SymbolViewProps } from 'expo-symbols';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useColorScheme } from 'nativewind';

interface SFSymbolProps {
  name: string;
  size?: number;
  color?: string;
  weight?: SymbolViewProps['weight'];
  scale?: SymbolViewProps['scale'];
  mode?: SymbolViewProps['mode'];
  fallbackIcon?: React.ComponentProps<typeof FontAwesome>['name'];
  style?: SymbolViewProps['style'];
}

export const SFSymbol: React.FC<SFSymbolProps> = ({
  name,
  size = 24,
  color,
  weight = 'regular',
  scale = 'default',
  mode = 'monochrome',
  fallbackIcon,
  style,
}) => {
  const { colorScheme } = useColorScheme();

  // Use dynamic color if no color specified
  const dynamicColor = color || (colorScheme === 'dark' ? '#ffffff' : '#374151');
  // Use SF Symbols on iOS, fallback to FontAwesome on Android
  if (Platform.OS === 'ios') {
    return (
      <SymbolView
        name={name}
        size={size}
        tintColor={dynamicColor}
        weight={weight}
        scale={scale}
        mode={mode}
        style={style}
      />
    );
  }

  // Android fallback
  if (fallbackIcon) {
    return <FontAwesome name={fallbackIcon} size={size} color={dynamicColor} style={style} />;
  }

  // Default fallback if no fallbackIcon provided
  return <FontAwesome name="question-circle" size={size} color={dynamicColor} style={style} />;
};