import { Code2, Database, Languages, Palette, Wrench } from "lucide-react";
import type { ReactNode } from "react";

type Style = { bg: string; icon: ReactNode };

function pickStyle(label: string): Style {
  const l = label.toLowerCase();
  if (l.includes("dev") || l.includes("java") || l.includes("kotlin")) {
    return {
      bg: "linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%)",
      icon: <Code2 className="w-3 h-3" />,
    };
  }
  if (l.includes("turk") || l.includes("türk") || l.includes("english")) {
    return {
      bg: "linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%)",
      icon: <Languages className="w-3 h-3" />,
    };
  }
  if (
    l.includes("script") ||
    l.includes("js") ||
    l.includes("ts") ||
    l.includes("python")
  ) {
    return {
      bg: "linear-gradient(135deg, #15803d 0%, #166534 100%)",
      icon: <Code2 className="w-3 h-3" />,
    };
  }
  if (l.includes("api") || l.includes("spigot") || l.includes("plugin")) {
    return {
      bg: "linear-gradient(135deg, #0e7490 0%, #155e75 100%)",
      icon: <Wrench className="w-3 h-3" />,
    };
  }
  if (l.includes("sql") || l.includes("redis") || l.includes("mongo")) {
    return {
      bg: "linear-gradient(135deg, #b45309 0%, #92400e 100%)",
      icon: <Database className="w-3 h-3" />,
    };
  }
  if (
    l.includes("design") ||
    l.includes("tasar") ||
    l.includes("photo") ||
    l.includes("ui")
  ) {
    return {
      bg: "linear-gradient(135deg, #be185d 0%, #9d174d 100%)",
      icon: <Palette className="w-3 h-3" />,
    };
  }
  return {
    bg: "linear-gradient(135deg, #475569 0%, #334155 100%)",
    icon: <Wrench className="w-3 h-3" />,
  };
}

export default function ExpertisePill({ label }: { label: string }) {
  const style = pickStyle(label);
  return (
    <span
      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-semibold text-white shadow-sm"
      style={{
        background: style.bg,
        boxShadow: "0 2px 6px rgba(0,0,0,0.25)",
      }}
    >
      {style.icon}
      {label}
    </span>
  );
}