"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface AgentSectionHeaderProps {
  title: string;
  count?: number;
  icon?: React.ReactNode;
  className?: string;
  delay?: number;
}

export function AgentSectionHeader({
  title,
  count,
  icon,
  className,
  delay = 0,
}: AgentSectionHeaderProps) {
  return (
    <motion.div
      className={cn("flex items-center gap-2", className)}
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.3, delay }}
    >
      {icon && (
        <div className="flex h-5 w-5 items-center justify-center rounded-md bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
          {icon}
        </div>
      )}
      <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">
        {title}
      </h3>
      {count !== undefined && (
        <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-400">
          {count}
        </span>
      )}
    </motion.div>
  );
}