"use client";

import { Code2 } from "lucide-react";
import { useState } from "react";

export function SkillIcon({ iconName, name }: { iconName: string | null; name: string }) {
  const [errored, setErrored] = useState(false);

  if (!iconName || errored) {
    return (
      <div className="w-9 h-9 rounded-xl bg-muted flex items-center justify-center">
        <Code2 size={18} className="text-muted-foreground" />
      </div>
    );
  }

  return (
    <img
      src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconName}/${iconName}-original.svg`}
      alt={name}
      className="w-9 h-9 object-contain"
      onError={() => setErrored(true)}
    />
  );
}
