AetherForge/server/web/src/components/Forge/ForgeFieldHints.tsx

import type { ForgeFieldMeta } from '../../help/forgeRules';
import { forgeBadgeLabel } from '../../help/forgeRules';
import { HelpTip } from '../HelpTip';

interface ForgeLockedHintProps {
  meta?: ForgeFieldMeta;
}

export function ForgeLockedHint({ meta }: ForgeLockedHintProps) {
  if (!meta?.lockedReason && !meta?.hint) return null;
  return (
    <p className="forge-locked-hint" title={meta.lockedReason || meta.hint}>
      🔒 {meta.lockedReason || meta.hint}
    </p>
  );
}

interface ForgeFieldBadgeProps {
  meta?: ForgeFieldMeta;
}

export function ForgeFieldBadge({ meta }: ForgeFieldBadgeProps) {
  if (!meta?.badge) return null;
  return (
    <span className={`forge-field-badge forge-badge-${meta.badge}`} title={forgeBadgeLabel(meta.badge)}>
      {meta.badge === 'baked' ? '⛏ baked' : meta.badge === 'server-only' ? '🖥 server' : '↳ if enabled'}
    </span>
  );
}

interface ForgeSectionHeaderProps {
  title: string;
  description: string;
  badge: 'baked' | 'server-only';
  helpField?: string;
}

export function ForgeSectionHeader({ title, description, badge, helpField }: ForgeSectionHeaderProps) {
  return (
    <div className="forge-section-header">
      <div className="forge-section-title-row">
        <h3>
          {title}
          {helpField ? <> <HelpTip field={helpField} /></> : null}
        </h3>
        <span className={`forge-field-badge forge-badge-${badge}`}>{forgeBadgeLabel(badge)}</span>
      </div>
      <p className="form-hint forge-section-desc">{description}</p>
    </div>
  );
}