"use client";

import Image from "next/image";
import { useState } from "react";

interface TechIconExternalProps {
  techId: string;
  techName: string;
  className?: string;
  size?: number;
}

// Service Simple Icons pour récupérer les icônes SVG
export function TechIconExternal({
  techId,
  techName,
  className = "w-6 h-6",
  size = 24,
}: TechIconExternalProps) {
  const [imageError, setImageError] = useState(false);

  // URL pour Simple Icons
  const simpleIconUrl = `https://cdn.jsdelivr.net/npm/simple-icons@v9/${techId}.svg`;

  // URL pour DevIcons
  const devIconUrl = `https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${techId}/${techId}-original.svg`;

  if (imageError) {
    // Fallback vers initiale si l'icône n'existe pas
    return (
      <div
        className={`${className} bg-muted rounded flex items-center justify-center text-xs font-bold`}
      >
        {techName.charAt(0).toUpperCase()}
      </div>
    );
  }

  return (
    <Image
      src={simpleIconUrl}
      alt={`${techName} icon`}
      width={size}
      height={size}
      className={className}
      onError={() => setImageError(true)}
      style={{ filter: "brightness(0) saturate(100%) invert(0.5)" }} // Pour s'adapter au thème
    />
  );
}

// Mapping des IDs pour Simple Icons (ils utilisent parfois des noms différents)
export const SIMPLE_ICONS_MAPPING: Record<string, string> = {
  react: "react",
  vue: "vuedotjs",
  typescript: "typescript",
  nextjs: "nextdotjs",
  nodejs: "nodedotjs",
  python: "python",
  express: "express",
  postgresql: "postgresql",
  mongodb: "mongodb",
  redis: "redis",
  docker: "docker",
  kubernetes: "kubernetes",
  aws: "amazonwebservices",
  terraform: "terraform",
  jenkins: "jenkins",
  githubactions: "githubactions",
  reactnative: "react",
  flutter: "flutter",
  swift: "swift",
  kotlin: "kotlin",
  expo: "expo",
  tailwindcss: "tailwindcss",
  webpack: "webpack",
};