/**
 * Icon component — wraps expo-symbols SymbolView for SF Symbols
 * Drop-in replacement for Ionicons across the app
 */

import { SymbolView, type SymbolViewProps } from 'expo-symbols'
import type { SFSymbol } from 'sf-symbols-typescript'
import type { ColorValue, ViewStyle, StyleProp } from 'react-native'

export type IconName = SFSymbol

export type IconProps = {
  /** SF Symbol name (e.g. 'flame.fill', 'play.fill') */
  name: IconName
  /** Size in points */
  size?: number
  /** Tint color applied to the symbol */
  tintColor?: ColorValue
  /** Alias for tintColor (Ionicons compat) */
  color?: ColorValue
  /** Symbol weight */
  weight?: SymbolViewProps['weight']
  /** Symbol rendering type */
  type?: SymbolViewProps['type']
  /** Animation configuration */
  animationSpec?: SymbolViewProps['animationSpec']
  /** View style (margin, position, etc.) */
  style?: StyleProp<ViewStyle>
}

export function Icon({
  name,
  size = 24,
  tintColor,
  color,
  weight,
  type = 'monochrome',
  animationSpec,
  style,
}: IconProps) {
  return (
    <SymbolView
      name={name}
      size={size}
      tintColor={tintColor ?? color}
      weight={weight}
      type={type}
      animationSpec={animationSpec}
      style={style}
    />
  )
}
