import React from "react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// AgentCategorySection
// ---------------------------------------------------------------------------

export type AgentCategorySectionProps = {
  title: string;
  description?: string;
  count?: number;
  children: React.ReactNode;
  className?: string;
};

export function AgentCategorySection({
  title,
  description,
  count,
  children,
  className,
}: AgentCategorySectionProps) {
  return (
    <section className={cn("flex flex-col gap-3", className)}>
      <div className="flex items-center gap-2">
        <h2 className="text-overline text-muted-foreground">{title}</h2>
        {count !== undefined && (
          <Badge variant="secondary" className="text-xs">
            {count}
          </Badge>
        )}
      </div>
      {description && (
        <p className="text-body-small text-muted-foreground -mt-1">
          {description}
        </p>
      )}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {children}
      </div>
    </section>
  );
}