"use client";

import { getTechIcon } from "./tech-icons";

interface SmartTechIconProps {
  techId: string;
  techName: string;
  className?: string;
  fallbackStyle?: "initial" | "emoji" | "gradient";
}

// Emojis pour certaines technologies populaires
const TECH_EMOJIS: Record<string, string> = {
  react: "⚛️",
  vue: "💚",
  typescript: "🔷",
  nextjs: "▲",
  nodejs: "🟢",
  python: "🐍",
  javascript: "💛",
  html: "🧡",
  css: "💙",
  docker: "🐳",
  kubernetes: "☸️",
  aws: "☁️",
  git: "🌿",
  github: "🐙",
  mongodb: "🍃",
  postgresql: "🐘",
  redis: "🔴",
  mysql: "🐬",
  flutter: "💙",
  swift: "🦉",
  kotlin: "🟣",
  java: "☕",
  php: "🐘",
  ruby: "💎",
  go: "🐹",
  rust: "🦀",
  csharp: "💜",
};

export function SmartTechIcon({
  techId,
  techName,
  className = "w-6 h-6",
  fallbackStyle = "initial",
}: SmartTechIconProps) {
  // Essayer d'abord l'icône SVG locale
  const TechIcon = getTechIcon(techId);

  // Si ce n'est pas l'icône par défaut, l'utiliser
  if (TechIcon !== getTechIcon("default")) {
    return <TechIcon className={className} />;
  }

  // Sinon, utiliser le style de fallback
  switch (fallbackStyle) {
    case "emoji":
      const emoji = TECH_EMOJIS[techId];
      if (emoji) {
        return (
          <div
            className={`${className} flex items-center justify-center text-lg`}
          >
            {emoji}
          </div>
        );
      }
      break;

    case "gradient":
      const gradientColors = [
        "from-blue-500 to-purple-500",
        "from-green-500 to-blue-500",
        "from-red-500 to-pink-500",
        "from-yellow-500 to-orange-500",
        "from-purple-500 to-indigo-500",
      ];
      const colorIndex = techId.length % gradientColors.length;

      return (
        <div
          className={`${className} bg-gradient-to-br ${gradientColors[colorIndex]} rounded flex items-center justify-center text-white text-xs font-bold`}
        >
          {techName.charAt(0).toUpperCase()}
        </div>
      );

    default: // "initial"
      return (
        <div
          className={`${className} bg-muted rounded flex items-center justify-center text-xs font-bold`}
        >
          {techName.charAt(0).toUpperCase()}
        </div>
      );
  }

  // Fallback final
  return (
    <div
      className={`${className} bg-muted rounded flex items-center justify-center text-xs font-bold`}
    >
      {techName.charAt(0).toUpperCase()}
    </div>
  );
}