import { Globe, Code, Image, Newspaper } from "lucide-react";
import { CATEGORIES, type Category } from "@/lib/mock-data";

const CATEGORY_META: Record<Category, { label: string; icon: React.ElementType }> = {
  general: { label: "General", icon: Globe },
  it: { label: "IT", icon: Code },
  images: { label: "Images", icon: Image },
  news: { label: "News", icon: Newspaper },
};

interface CategoryTabsProps {
  active: Category;
  onChange: (c: Category) => void;
}

export function CategoryTabs({ active, onChange }: CategoryTabsProps) {
  return (
    <div className="flex gap-1">
      {CATEGORIES.map((cat) => {
        const { label, icon: Icon } = CATEGORY_META[cat];
        const isActive = cat === active;
        return (
          <button
            key={cat}
            onClick={() => onChange(cat)}
            className={`flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
              isActive
                ? "bg-primary text-primary-foreground"
                : "text-muted-foreground hover:text-foreground hover:bg-secondary"
            }`}
          >
            <Icon size={14} />
            {label}
          </button>
        );
      })}
    </div>
  );
}
