"use client";

/* React-safe feather icons for the Viho theme.
   Fetches each icon's SVG definition once from /assets/fonts/feather/<name>.svg
   (module-level cache) and renders it inline — no DOM mutation, so React
   re-renders (e.g. language switching) never conflict with icon replacement. */

import { useEffect, useState } from "react";

const svgCache = new Map<string, string>();

export interface IconProps {
  className?: string;
}

function FeatherIcon({ name, className }: { name: string; className?: string }) {
  const [svg, setSvg] = useState<string | null>(svgCache.get(name) ?? null);

  useEffect(() => {
    if (svgCache.has(name)) {
      setSvg(svgCache.get(name)!);
      return;
    }
    let cancelled = false;
    fetch(`/assets/fonts/feather/${name}.svg`)
      .then((res) => (res.ok ? res.text() : Promise.reject(new Error(name))))
      .then((text) => {
        svgCache.set(name, text);
        if (!cancelled) setSvg(text);
      })
      .catch(() => {
        if (!cancelled) setSvg("");
      });
    return () => {
      cancelled = true;
    };
  }, [name]);

  return (
    <span
      className={`feather-inline ${className ?? ""}`}
      aria-hidden="true"
      dangerouslySetInnerHTML={{ __html: svg ?? "" }}
    />
  );
}

export const IconDashboard = ({ className }: IconProps) => <FeatherIcon name="home" className={className} />;
export const IconPackage = ({ className }: IconProps) => <FeatherIcon name="package" className={className} />;
export const IconPackage2 = ({ className }: IconProps) => <FeatherIcon name="package" className={className} />;
export const IconBuilding = ({ className }: IconProps) => <FeatherIcon name="briefcase" className={className} />;
export const IconClipboard = ({ className }: IconProps) => <FeatherIcon name="clipboard" className={className} />;
export const IconCard = ({ className }: IconProps) => <FeatherIcon name="credit-card" className={className} />;
export const IconAcademic = ({ className }: IconProps) => <FeatherIcon name="book-open" className={className} />;
export const IconLogout = ({ className }: IconProps) => <FeatherIcon name="log-out" className={className} />;
export const IconMenu = ({ className }: IconProps) => <FeatherIcon name="menu" className={className} />;
export const IconX = ({ className }: IconProps) => <FeatherIcon name="x" className={className} />;
export const IconGlobe = ({ className }: IconProps) => <FeatherIcon name="globe" className={className} />;
export const IconPlus = ({ className }: IconProps) => <FeatherIcon name="plus" className={className} />;
export const IconEdit = ({ className }: IconProps) => <FeatherIcon name="edit-2" className={className} />;
export const IconTrash = ({ className }: IconProps) => <FeatherIcon name="trash-2" className={className} />;
export const IconCheck = ({ className }: IconProps) => <FeatherIcon name="check" className={className} />;
export const IconBan = ({ className }: IconProps) => <FeatherIcon name="slash" className={className} />;
export const IconWallet = ({ className }: IconProps) => <FeatherIcon name="dollar-sign" className={className} />;
export const IconUsers = ({ className }: IconProps) => <FeatherIcon name="users" className={className} />;
export const IconTrend = ({ className }: IconProps) => <FeatherIcon name="trending-up" className={className} />;
export const IconSearch = ({ className }: IconProps) => <FeatherIcon name="search" className={className} />;
export const IconChevronDown = ({ className }: IconProps) => <FeatherIcon name="chevron-down" className={className} />;
export const IconArrowRight = ({ className }: IconProps) => <FeatherIcon name="arrow-right" className={className} />;
export const IconSparkle = ({ className }: IconProps) => <FeatherIcon name="star" className={className} />;
export const IconClock = ({ className }: IconProps) => <FeatherIcon name="clock" className={className} />;
export const IconWatch = ({ className }: IconProps) => <FeatherIcon name="watch" className={className} />;
export const IconShield = ({ className }: IconProps) => <FeatherIcon name="shield" className={className} />;
export const IconBell = ({ className }: IconProps) => <FeatherIcon name="bell" className={className} />;
export const IconSettings = ({ className }: IconProps) => <FeatherIcon name="settings" className={className} />;
export const IconMail = ({ className }: IconProps) => <FeatherIcon name="mail" className={className} />;
export const IconLock = ({ className }: IconProps) => <FeatherIcon name="lock" className={className} />;
export const IconUser = ({ className }: IconProps) => <FeatherIcon name="user" className={className} />;
export const IconAlign = ({ className }: IconProps) => <FeatherIcon name="align-center" className={className} />;
export const IconMore = ({ className }: IconProps) => <FeatherIcon name="more-horizontal" className={className} />;
export const IconEye = ({ className }: IconProps) => <FeatherIcon name="eye" className={className} />;
export const IconEyeOff = ({ className }: IconProps) => <FeatherIcon name="eye-off" className={className} />;
export const IconLayers = ({ className }: IconProps) => <FeatherIcon name="layers" className={className} />;
export const IconCalendar = ({ className }: IconProps) => <FeatherIcon name="calendar" className={className} />;
export const IconSend = ({ className }: IconProps) => <FeatherIcon name="send" className={className} />;
export const IconBook = ({ className }: IconProps) => <FeatherIcon name="book" className={className} />;
export const IconBriefcase = ({ className }: IconProps) => <FeatherIcon name="briefcase" className={className} />;
export const IconBox = ({ className }: IconProps) => <FeatherIcon name="box" className={className} />;
export const IconPhone = ({ className }: IconProps) => <FeatherIcon name="phone" className={className} />;
export const IconMessageCircle = ({ className }: IconProps) => <FeatherIcon name="message-circle" className={className} />;
export const IconDownload = ({ className }: IconProps) => <FeatherIcon name="download" className={className} />;
export const IconUpload = ({ className }: IconProps) => <FeatherIcon name="upload" className={className} />;
export const IconCheckCircle = ({ className }: IconProps) => <FeatherIcon name="check-circle" className={className} />;
export const IconAlertTriangle = ({ className }: IconProps) => <FeatherIcon name="alert-triangle" className={className} />;
export const IconUserCheck = ({ className }: IconProps) => <FeatherIcon name="user-check" className={className} />;
export const IconDollar = ({ className }: IconProps) => <FeatherIcon name="dollar-sign" className={className} />;
export const IconFile = ({ className }: IconProps) => <FeatherIcon name="file-text" className={className} />;
export const IconMap = ({ className }: IconProps) => <FeatherIcon name="map" className={className} />;
export const IconTruck = ({ className }: IconProps) => <FeatherIcon name="truck" className={className} />;
export const IconHome = ({ className }: IconProps) => <FeatherIcon name="home" className={className} />;
export const IconLifeBuoy = ({ className }: IconProps) => <FeatherIcon name="life-buoy" className={className} />;
export const IconPaperclip = ({ className }: IconProps) => <FeatherIcon name="paperclip" className={className} />;
export const IconAward = ({ className }: IconProps) => <FeatherIcon name="award" className={className} />;
export const IconKey = ({ className }: IconProps) => <FeatherIcon name="lock" className={className} />;
export const IconCamera = ({ className }: IconProps) => <FeatherIcon name="camera" className={className} />;
export const IconCheckSquare = ({ className }: IconProps) => <FeatherIcon name="check-square" className={className} />;
export const IconPrinter = ({ className }: IconProps) => <FeatherIcon name="printer" className={className} />;
export const IconActivity = ({ className }: IconProps) => <FeatherIcon name="activity" className={className} />;
export const IconPlay = ({ className }: IconProps) => <FeatherIcon name="play" className={className} />;
export const IconInfo = ({ className }: IconProps) => <FeatherIcon name="info" className={className} />;
export const IconBarChart = ({ className }: IconProps) => <FeatherIcon name="bar-chart-2" className={className} />;
export const IconMapPin = ({ className }: IconProps) => <FeatherIcon name="map-pin" className={className} />;
export const IconPieChart = ({ className }: IconProps) => <FeatherIcon name="pie-chart" className={className} />;