"use client";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import type { AgentCategory } from "@/types/agent";

interface AgentCategoryTabsProps {
  categories: AgentCategory[];
  selectedCategoryId?: string | null;
  onSelectCategory: (categoryId: string | null) => void;
}

export function AgentCategoryTabs({
  categories,
  selectedCategoryId,
  onSelectCategory,
}: AgentCategoryTabsProps) {
  return (
    <div className="flex flex-wrap gap-2">
      <button
        type="button"
        onClick={() => onSelectCategory(null)}
        className={cn(
          "rounded-full border px-3 py-1 text-xs transition-colors",
          !selectedCategoryId
            ? "border-primary bg-primary/10 text-primary"
            : "border-border bg-background text-muted-foreground hover:bg-muted/50"
        )}
      >
        全部
      </button>
      {categories.map((category) => (
        <button
          key={category.id}
          type="button"
          onClick={() => onSelectCategory(category.id)}
          className={cn(
            "rounded-full border px-3 py-1 text-xs transition-colors",
            selectedCategoryId === category.id
              ? "border-primary bg-primary/10 text-primary"
              : "border-border bg-background text-muted-foreground hover:bg-muted/50"
          )}
        >
          <span>{category.name}</span>
          {category.scope === "global" ? (
            <Badge variant="outline" className="ml-2 px-1.5 py-0 text-[10px]">
              全局
            </Badge>
          ) : null}
        </button>
      ))}
    </div>
  );
}