import { cn } from '@/lib/utils';
import { useDarkMode } from '@/hooks/useDarkMode';
import { formatCategoryName, getCategoryColorTheme } from '@/lib/skills-utils';

interface CategoryBadgeProps {
  category: string;
  className?: string;
  showDot?: boolean;
}

/** Category pill — same color system as filter dropdown (dot + tinted badge). */
export function CategoryBadge({ category, className, showDot = true }: CategoryBadgeProps) {
  const isDark = useDarkMode();
  const theme = getCategoryColorTheme(category, isDark);
  const label = formatCategoryName(category);

  return (
    <span
      className={cn(
        'inline-flex max-w-full items-center gap-1.5 rounded-md border px-2 py-0.5',
        'text-[10px] font-medium leading-none capitalize',
        className
      )}
      style={{
        backgroundColor: theme.badgeBg,
        color: theme.badgeText,
        borderColor: theme.badgeBorder,
      }}
    >
      {showDot && (
        <span
          className="h-1.5 w-1.5 shrink-0 rounded-full"
          style={{ backgroundColor: theme.dot }}
          aria-hidden
        />
      )}
      <span className="truncate">{label}</span>
    </span>
  );
}