nuzlocke-tracker/frontend/src/components/RuleBadges.tsx

import type { NuzlockeRules } from '../types'
import { RULE_DEFINITIONS } from '../types/rules'
import { TypeBadge } from './TypeBadge'

interface RuleBadgesProps {
  rules: NuzlockeRules
}

export function RuleBadges({ rules }: RuleBadgesProps) {
  const enabledRules = RULE_DEFINITIONS.filter((def) => rules[def.key])
  const allowedTypes = rules.allowedTypes ?? []

  if (enabledRules.length === 0 && allowedTypes.length === 0) {
    return <span className="text-sm text-text-tertiary">No rules enabled</span>
  }

  return (
    <div className="flex flex-wrap gap-1.5">
      {enabledRules.map((def) => (
        <span
          key={def.key}
          title={def.description}
          className={`px-2 py-0.5 rounded-full text-xs font-medium ${
            def.category === 'core'
              ? 'bg-blue-900/40 text-blue-300 light:bg-blue-100 light:text-blue-700'
              : def.category === 'variant'
                ? 'bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-700'
                : 'bg-purple-900/40 text-purple-300 light:bg-purple-100 light:text-purple-700'
          }`}
        >
          {def.name}
        </span>
      ))}
      {allowedTypes.length > 0 && (
        <span
          title={`Type restriction: ${allowedTypes.map((t) => t.charAt(0).toUpperCase() + t.slice(1)).join(', ')}`}
          className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-700 flex items-center gap-1"
        >
          <span>Type Restriction</span>
          {allowedTypes.map((t) => (
            <TypeBadge key={t} type={t} size="sm" />
          ))}
        </span>
      )}
    </div>
  )
}