import type { ReactNode } from 'react';

type PlatformFieldLabelVariant =
  | 'field'
  | 'section'
  | 'form'
  | 'inlineForm'
  | 'pill'
  | 'accentPill';

type PlatformFieldLabelProps = {
  children: ReactNode;
  variant?: PlatformFieldLabelVariant;
  className?: string;
};

const PLATFORM_FIELD_LABEL_CLASS: Record<PlatformFieldLabelVariant, string> = {
  field: 'text-xs font-bold text-[var(--platform-text-soft)]',
  section:
    'text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]',
  form: 'mb-2 block text-sm font-black text-[var(--platform-text-strong)]',
  inlineForm:
    'inline-flex items-center text-sm font-bold text-[var(--platform-text-base)]',
  pill: 'mb-2 inline-flex rounded-full px-2 py-0.5 text-sm font-black text-[var(--platform-text-strong)]',
  accentPill:
    'mb-2 inline-flex rounded-full border border-rose-200/70 bg-rose-50/88 px-2.5 py-1 text-sm font-black text-rose-700 shadow-sm',
};

/**
 * 平台字段标签。
 * 统一承接结果页和创作工作台内重复出现的字段标题视觉。
 */
export function PlatformFieldLabel({
  children,
  variant = 'field',
  className,
}: PlatformFieldLabelProps) {
  return (
    <span
      className={[PLATFORM_FIELD_LABEL_CLASS[variant], className]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </span>
  );
}