import React from 'react';
import { ViewStyle, TextStyle } from 'react-native';
import { Feather, Ionicons, MaterialCommunityIcons, FontAwesome5 } from '@expo/vector-icons';

interface IconProps {
  name: string;
  size?: number;
  color?: string;
  style?: ViewStyle | TextStyle;
}

// Icon component with unified interface
export const Icon: React.FC<IconProps> = ({ 
  name, 
  size = 24, 
  color = '#000',
  style 
}) => {
  // Map custom names to actual icon library icons
  switch (name) {
    // Tab icons
    case 'flow':
      return <Ionicons name="water-outline" size={size} color={color} style={style} />;
    case 'vault':
      return <MaterialCommunityIcons name="safe-square-outline" size={size} color={color} style={style} />;
    case 'sentinel':
      return <Ionicons name="shield-checkmark-outline" size={size} color={color} style={style} />;
    case 'heritage':
      return <MaterialCommunityIcons name="file-document-outline" size={size} color={color} style={style} />;
    case 'me':
      return <Feather name="user" size={size} color={color} style={style} />;
    
    // Asset type icons
    case 'game':
      return <Ionicons name="game-controller-outline" size={size} color={color} style={style} />;
    case 'key':
      return <Feather name="key" size={size} color={color} style={style} />;
    case 'document':
      return <Ionicons name="document-text-outline" size={size} color={color} style={style} />;
    case 'photo':
      return <Ionicons name="image-outline" size={size} color={color} style={style} />;
    case 'will':
      return <MaterialCommunityIcons name="script-text-outline" size={size} color={color} style={style} />;
    case 'custom':
      return <Feather name="package" size={size} color={color} style={style} />;
    
    // Action icons
    case 'add':
      return <Feather name="plus" size={size} color={color} style={style} />;
    case 'check':
      return <Feather name="check" size={size} color={color} style={style} />;
    case 'lock':
      return <Feather name="lock" size={size} color={color} style={style} />;
    case 'unlock':
      return <Feather name="unlock" size={size} color={color} style={style} />;
    case 'shield':
      return <Ionicons name="shield-checkmark" size={size} color={color} style={style} />;
    case 'fingerprint':
      return <Ionicons name="finger-print" size={size} color={color} style={style} />;
    case 'encrypted':
      return <MaterialCommunityIcons name="lock-check" size={size} color={color} style={style} />;
    
    // Input type icons
    case 'text':
      return <MaterialCommunityIcons name="format-text" size={size} color={color} style={style} />;
    case 'voice':
      return <Ionicons name="mic-outline" size={size} color={color} style={style} />;
    case 'image':
      return <Ionicons name="camera-outline" size={size} color={color} style={style} />;
    
    // Status icons
    case 'statusnormal':
      return <Ionicons name="checkmark-circle" size={size} color={color} style={style} />;
    case 'statuswarning':
      return <Ionicons name="warning" size={size} color={color} style={style} />;
    case 'statusreleasing':
      return <Ionicons name="alert-circle" size={size} color={color} style={style} />;
    
    // Navigation icons
    case 'arrowRight':
      return <Feather name="arrow-right" size={size} color={color} style={style} />;
    case 'arrowUp':
      return <Feather name="arrow-up-right" size={size} color={color} style={style} />;
    case 'chevronRight':
      return <Feather name="chevron-right" size={size} color={color} style={style} />;
    case 'close':
      return <Feather name="x" size={size} color={color} style={style} />;
    
    // Other icons
    case 'heartbeat':
      return <MaterialCommunityIcons name="heart-pulse" size={size} color={color} style={style} />;
    case 'warningSign':
      return <Ionicons name="warning-outline" size={size} color={color} style={style} />;
    case 'info':
      return <Feather name="info" size={size} color={color} style={style} />;
    case 'settings':
      return <Feather name="settings" size={size} color={color} style={style} />;
    case 'clock':
      return <Feather name="clock" size={size} color={color} style={style} />;
    case 'calendar':
      return <Feather name="calendar" size={size} color={color} style={style} />;
    case 'link':
      return <Feather name="external-link" size={size} color={color} style={style} />;
    case 'github':
      return <Feather name="github" size={size} color={color} style={style} />;
    case 'mail':
      return <Feather name="mail" size={size} color={color} style={style} />;
    case 'privacy':
      return <Feather name="eye-off" size={size} color={color} style={style} />;
    case 'terms':
      return <MaterialCommunityIcons name="file-sign" size={size} color={color} style={style} />;
    case 'wave':
      return <MaterialCommunityIcons name="wave" size={size} color={color} style={style} />;
    case 'palm':
      return <FontAwesome5 name="tree" size={size} color={color} style={style} />;
    case 'sun':
      return <Feather name="sun" size={size} color={color} style={style} />;
    case 'star':
      return <Feather name="star" size={size} color={color} style={style} />;
    case 'heart':
      return <Feather name="heart" size={size} color={color} style={style} />;
    case 'users':
      return <Feather name="users" size={size} color={color} style={style} />;
    case 'gift':
      return <Feather name="gift" size={size} color={color} style={style} />;
    case 'zap':
      return <Feather name="zap" size={size} color={color} style={style} />;
      
    default:
      return <Feather name="circle" size={size} color={color} style={style} />;
  }
};

// Predefined icon components for common use cases
export const GameIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="game" {...props} />
);

export const KeyIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="key" {...props} />
);

export const DocumentIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="document" {...props} />
);

export const PhotoIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="photo" {...props} />
);

export const WillIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="will" {...props} />
);

export const CustomIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="custom" {...props} />
);

export const CheckIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="check" {...props} />
);

export const LockIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="lock" {...props} />
);

export const ShieldIcon = (props: Omit<IconProps, 'name'>) => (
  <Icon name="shield" {...props} />
);