import type React from "react"
import { View, StyleSheet } from "react-native"
import { 
  MaterialIcons, 
  MaterialCommunityIcons, 
  Ionicons, 
  FontAwesome, 
  FontAwesome5, 
  Feather 
} from "@expo/vector-icons"

// Tipos de ícones suportados
type IconType = "material" | "material-community" | "ionicons" | "font-awesome" | "font-awesome5" | "feather"

interface IconProps {
  type: IconType
  name: string
  size?: number
  color?: string
  style?: any
}

const Icon: React.FC<IconProps> = ({ type, name, size = 24, color = "#000", style }) => {
  const renderIcon = () => {
    switch (type) {
      case "material":
        return <MaterialIcons name={name} size={size} color={color} />
      case "material-community":
        return <MaterialCommunityIcons name={name} size={size} color={color} />
      case "ionicons":
        return <Ionicons name={name} size={size} color={color} />
      case "font-awesome":
        return <FontAwesome name={name} size={size} color={color} />
      case "font-awesome5":
        return <FontAwesome5 name={name} size={size} color={color} />
      case "feather":
        return <Feather name={name} size={size} color={color} />
      default:
        return <MaterialIcons name="error" size={size} color="red" />
    }
  }

  return <View style={[styles.container, style]}>{renderIcon()}</View>
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
  },
})

export default Icon