// ─── Skill Category Header ───────────────────────────────────────────
// Header for a skill category with collapse/expand toggle

import { Badge } from '@/components/ui/badge';
import { ChevronDown, ChevronRight } from 'lucide-react';

interface SkillCategoryHeaderProps {
  category: {
    id: string;
    name: string;
    icon: string;
  };
  skillCount: number;
  isCollapsed: boolean;
  onToggle: () => void;
}

export function SkillCategoryHeader({
  category,
  skillCount,
  isCollapsed,
  onToggle,
}: SkillCategoryHeaderProps) {
  return (
    <CardHeader className="pb-2 cursor-pointer" onClick={onToggle}>
      <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center justify-between">
        <span>
          {category.icon} {category.name}
        </span>
        <div className="flex items-center gap-2">
          <Badge variant="outline" className="text-xs">
            {skillCount} skills
          </Badge>
          {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
        </div>
      </CardTitle>
    </CardHeader>
  );
}

// Local import of CardHeader and CardTitle to avoid circular deps
import { CardHeader, CardTitle } from '@/components/ui/card';