import { ToolIcon, KindIcon } from '../tool-icons.tsx';

/**
 * Brand-chip square for a marketplace item. Renders a category-specific brand
 * mark (GitHub, Supabase, ...) for tool-kind items, and a kind-specific mark
 * (SkillIcon, BundleIcon) for skill / bundle items.
 *
 * Pure presentational component — no client interactivity, server-renderable.
 *
 * @param {{ kind: 'tool'|'skill'|'bundle', category?: string, size?: number }} props
 */
export default function KindChip({ kind, category, size = 18 }) {
  const className = `mkt-chip-tile kind-${kind}`;
  if (kind === 'tool') {
    return (
      <span className={className} aria-hidden="true">
        <ToolIcon category={category} size={size} />
      </span>
    );
  }
  return (
    <span className={className} aria-hidden="true">
      <KindIcon kind={kind} size={size} />
    </span>
  );
}
