// 常用图标组件 - 转换为React组件以减少HTTP请求

export interface IconProps {
  width?: number;
  height?: number;
  className?: string;
  color?: string;
}

// 导航图标
export const IconLending = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 2L2 6v6c0 4.42 3.03 8.13 7 9 3.97-.87 7-4.58 7-9V6l-8-4z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconAlp = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3 17h14M5 17V9l5-6 5 6v8M8 17v-4h4v4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconSwap = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 9h12M12 5l4 4-4 4M16 11H4M8 15l-4-4 4-4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconTransparency = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM10 6v6M10 14h.01" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconEcosystem = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3 10h4M13 10h4M10 3v4M10 13v4M6.34 6.34l2.83 2.83M10.83 10.83l2.83 2.83M6.34 13.66l2.83-2.83M10.83 9.17l2.83-2.83" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);

export const IconPoints = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 2l2.5 6.5L19 10l-6.5 2.5L10 19l-2.5-6.5L1 10l6.5-2.5L10 2z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// 操作图标
export const IconCopy = ({ width = 16, height = 16, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 5V3a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2h-2M3 11a2 2 0 002 2h6a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v6z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconWallet = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3 5a2 2 0 012-2h10a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM3 8h14M13 11h2" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconNotification = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M15 7a5 5 0 10-10 0c0 5-2 7-2 7h14s-2-2-2-7zM11.73 16a2 2 0 01-3.46 0" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconRefresh = ({ width = 16, height = 16, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M14 8A6 6 0 104 4.5M4 2v2.5h2.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconArrowRight = ({ width = 16, height = 16, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3 8h10M9 4l4 4-4 4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// UI图标
export const IconChevronLeft = ({ width = 10, height = 10, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 2L3 5l3 3" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconChevronRight = ({ width = 10, height = 10, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 2l3 3-3 3" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconChart = ({ width = 16, height = 16, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M2 14V6l4-4 4 4 4-4v12" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconClose = ({ width = 20, height = 20, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M15 5L5 15M5 5l10 10" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// 用户图标
export const IconWhale = ({ width = 24, height = 24, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 12c0-3.5 2-6 5-7 3-1 6-.5 8 1.5 2 2 3 5 3 8s-2 5-5 5-6-1-8-3.5c-1-1.5-3-2-3-4z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconTrader = ({ width = 24, height = 24, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3 21V9l9-6 9 6v12M9 21v-6h6v6" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const IconUser = ({ width = 24, height = 24, className = "", color = "currentColor" }: IconProps) => (
  <svg width={width} height={height} className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);