import { ChevronRight } from "lucide-react";
import { SkillCategory } from "@/lib/types";
import { getCategoryIcon } from "@/lib/category-icons";

interface CategoryTabsProps {
  categories: SkillCategory[];
  selectedCategory: string;
  onCategoryChange: (category: string) => void;
}

export function CategoryTabs({
  categories,
  selectedCategory,
  onCategoryChange,
}: CategoryTabsProps) {
  return (
    <div className="flex flex-wrap gap-2 mb-8">
      {categories.map((category) => {
        const isActive = selectedCategory === category.category;
        const CategoryIcon = getCategoryIcon(category.icon);
        return (
          <button
            key={category.category}
            onClick={() => onCategoryChange(category.category)}
            className={`
              relative px-6 py-3 rounded-xl font-medium transition-all duration-300 group flex items-center gap-2
              ${
                isActive
                  ? "bg-blue-500 text-white shadow-lg shadow-blue-500/25"
                  : "bg-white/5 text-slate-300 hover:bg-white/10 border border-white/10 hover:border-white/20"
              }
            `}
          >
            <CategoryIcon className="w-4 h-4 relative z-10" />
            <span className="relative z-10">{category.category}</span>
            {isActive && (
              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-600/20 to-blue-400/20 animate-pulse" />
            )}
          </button>
        );
      })}
    </div>
  );
}