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

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

interface RuleBadgesProps {
  rules: NuzlockeRules
}

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

  if (enabledRules.length === 0) {
    return <span className="text-sm text-gray-500 dark:text-gray-400">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-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
              : def.category === 'completion'
                ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
                : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
          }`}
        >
          {def.name}
        </span>
      ))}
    </div>
  )
}