const { useState, useEffect, useContext, createContext, useMemo, useRef } = React;

function BfaIcon({ name, size = 20, color = "currentColor", className = "", style = {} }) {
  const defaultProps = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: color,
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    className: `bfa-svg-icon ${className}`,
    style: { display: 'inline-block', verticalAlign: 'middle', flexShrink: 0, ...style }
  };

  switch (name) {
    case "math":
      return (
        <svg {...defaultProps}>
          <path d="M4 19L9 14L13 18L20 9" />
          <path d="M14 9H20V15" />
          <path d="M3 3v18h18" />
        </svg>
      );
    case "finance":
    case "chart":
      return (
        <svg {...defaultProps}>
          <line x1="18" y1="20" x2="18" y2="10" />
          <line x1="12" y1="20" x2="12" y2="4" />
          <line x1="6" y1="20" x2="6" y2="14" />
        </svg>
      );
    case "trophy":
    case "award":
      return (
        <svg {...defaultProps}>
          <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
          <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
          <path d="M4 22h16" />
          <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
          <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
          <path d="M18 2H6v7a6 6 0 0 0 12 0V2z" />
        </svg>
      );
    case "edit":
    case "pencil":
      return (
        <svg {...defaultProps}>
          <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
        </svg>
      );
    case "video":
    case "film":
      return (
        <svg {...defaultProps}>
          <rect x="2" y="4" width="20" height="16" rx="2.18" ry="2.18" />
          <polygon points="10 8 16 12 10 16 10 8" />
        </svg>
      );
    case "chat":
    case "message":
      return (
        <svg {...defaultProps}>
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
        </svg>
      );
    case "pin":
    case "bookmark":
      return (
        <svg {...defaultProps}>
          <line x1="12" y1="17" x2="12" y2="22" />
          <path d="M5 17h14l-1.5-6h-11L5 17z" />
          <path d="M9 11V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v7" />
        </svg>
      );
    case "zap":
    case "flash":
      return (
        <svg {...defaultProps}>
          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
        </svg>
      );
    case "globe":
    case "world":
      return (
        <svg {...defaultProps}>
          <circle cx="12" cy="12" r="10" />
          <line x1="2" y1="12" x2="22" y2="12" />
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
        </svg>
      );
    case "check":
    case "checkCircle":
      return (
        <svg {...defaultProps}>
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
          <polyline points="22 4 12 14.01 9 11.01" />
        </svg>
      );
    case "checkSimple":
      return (
        <svg {...defaultProps}>
          <polyline points="20 6 9 17 4 12" />
        </svg>
      );
    case "book":
    case "reader":
      return (
        <svg {...defaultProps}>
          <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
          <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
        </svg>
      );
    case "target":
      return (
        <svg {...defaultProps}>
          <circle cx="12" cy="12" r="10" />
          <circle cx="12" cy="12" r="6" />
          <circle cx="12" cy="12" r="2" />
        </svg>
      );
    case "lock":
      return (
        <svg {...defaultProps}>
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
        </svg>
      );
    case "gear":
    case "settings":
      return (
        <svg {...defaultProps}>
          <circle cx="12" cy="12" r="3" />
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
        </svg>
      );
    case "sparkles":
    case "star":
      return (
        <svg {...defaultProps}>
          <path d="M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z" />
        </svg>
      );
    case "calendar":
      return (
        <svg {...defaultProps}>
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
          <line x1="16" y1="2" x2="16" y2="6" />
          <line x1="8" y1="2" x2="8" y2="6" />
          <line x1="3" y1="10" x2="21" y2="10" />
        </svg>
      );
    case "user":
      return (
        <svg {...defaultProps}>
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
          <circle cx="12" cy="7" r="4" />
        </svg>
      );
    case "clock":
    case "timer":
      return (
        <svg {...defaultProps}>
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 6 12 12 16 14" />
        </svg>
      );
    case "eye":
      return (
        <svg {...defaultProps}>
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
          <circle cx="12" cy="12" r="3" />
        </svg>
      );
    case "eyeOff":
      return (
        <svg {...defaultProps}>
          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
          <line x1="1" y1="1" x2="23" y2="23" />
        </svg>
      );
    case "mic":
      return (
        <svg {...defaultProps}>
          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
          <line x1="12" y1="19" x2="12" y2="23" />
          <line x1="8" y1="23" x2="16" y2="23" />
        </svg>
      );
    case "ruler":
      return (
        <svg {...defaultProps}>
          <path d="M21.3 15.3l-9-9a1 1 0 0 0-1.4 0l-7 7a1 1 0 0 0 0 1.4l9 9a1 1 0 0 0 1.4 0l7-7a1 1 0 0 0 0-1.4z" />
          <line x1="14.5" y1="12.5" x2="16" y2="11" />
          <line x1="11.5" y1="9.5" x2="13" y2="8" />
          <line x1="8.5" y1="6.5" x2="10" y2="5" />
        </svg>
      );
    case "mapPin":
      return (
        <svg {...defaultProps}>
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
          <circle cx="12" cy="10" r="3" />
        </svg>
      );
    case "refresh":
      return (
        <svg {...defaultProps}>
          <polyline points="23 4 23 10 17 10" />
          <polyline points="1 20 1 14 7 14" />
          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
        </svg>
      );
    case "save":
      return (
        <svg {...defaultProps}>
          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
          <polyline points="17 21 17 13 7 13 7 21" />
          <polyline points="7 3 7 8 15 8" />
        </svg>
      );
    case "logout":
      return (
        <svg {...defaultProps}>
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
          <polyline points="16 17 21 12 16 7" />
          <line x1="21" y1="12" x2="9" y2="12" />
        </svg>
      );
    case "news":
    case "newspaper":
      return (
        <svg {...defaultProps}>
          <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" />
          <path d="M18 14h-8" />
          <path d="M18 18h-8" />
          <path d="M18 10h-8" />
        </svg>
      );
    case "calculator":
      return (
        <svg {...defaultProps}>
          <rect x="4" y="2" width="16" height="20" rx="2" />
          <line x1="8" y1="6" x2="16" y2="6" />
          <path d="M16 14v4" />
          <circle cx="8" cy="10" r="0.5" fill="currentColor" />
          <circle cx="12" cy="10" r="0.5" fill="currentColor" />
          <circle cx="16" cy="10" r="0.5" fill="currentColor" />
          <circle cx="8" cy="14" r="0.5" fill="currentColor" />
          <circle cx="12" cy="14" r="0.5" fill="currentColor" />
          <circle cx="8" cy="18" r="0.5" fill="currentColor" />
          <circle cx="12" cy="18" r="0.5" fill="currentColor" />
        </svg>
      );
    case "close":
    case "x":
      return (
        <svg {...defaultProps}>
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      );
    case "paper":
    case "fileText":
      return (
        <svg {...defaultProps}>
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
          <polyline points="14 2 14 8 20 8" />
          <line x1="16" y1="13" x2="8" y2="13" />
          <line x1="16" y1="17" x2="8" y2="17" />
        </svg>
      );
    case "lightbulb":
    case "tip":
      return (
        <svg {...defaultProps}>
          <path d="M9 18h6" />
          <path d="M10 22h4" />
          <path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" />
        </svg>
      );
    case "shield":
    case "stop":
      return (
        <svg {...defaultProps}>
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
        </svg>
      );
    case "circle":
      return (
        <svg {...defaultProps}>
          <circle cx="12" cy="12" r="10" />
        </svg>
      );
    case "feather":
    case "author":
      return (
        <svg {...defaultProps}>
          <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L3 13v5h5l9.75-9.76z" />
          <line x1="16" y1="5" x2="19" y2="8" />
        </svg>
      );
    case "applause":
    case "thumbsUp":
      return (
        <svg {...defaultProps}>
          <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
        </svg>
      );
    default:
      return (
        <svg {...defaultProps}>
          <circle cx="12" cy="12" r="10" />
          <line x1="12" y1="8" x2="12" y2="12" />
          <line x1="12" y1="16" x2="12.01" y2="16" />
        </svg>
      );
  }
}

window.BfaIcon = BfaIcon;