import type { ReactNode } from 'react';
import { Calculator } from 'lucide-react';

export function PricingInlineField(props: {
  label: string;
  children: ReactNode;
}) {
  return (
    <div className="pricingInlineField">
      <span>{props.label}</span>
      {props.children}
    </div>
  );
}

export function PricingReadonlyField(props: {
  label: string;
  value: string;
}) {
  return (
    <div className="pricingInlineField pricingInlineReadonly">
      <span>{props.label}</span>
      <strong>{props.value}</strong>
    </div>
  );
}

export function unitLabel(unit: string | undefined) {
  const labels: Record<string, string> = {
    image: '每张图片',
    '5s': '每 5 秒',
    second: '每秒',
    item: '每次',
    '1k_tokens': '每 1K Token',
    character_1k: '每 1K 字符',
  };
  return labels[unit ?? ''] ?? unit ?? '-';
}

export function calculatorLabel(calculatorType: string | undefined) {
  const labels: Record<string, string> = {
    token_usage: '按 Token 用量',
    unit_weight: '按数量和参数',
    duration_weight: '按时长和参数',
    formula: '按公式',
  };
  return labels[calculatorType ?? ''] ?? calculatorType ?? '-';
}

export function PricingFormulaNote(props: {
  children: ReactNode;
}) {
  return (
    <div className="pricingFormulaBox">
      <Calculator size={16} />
      <div>
        <strong>计费公式</strong>
        <p>{props.children}</p>
      </div>
    </div>
  );
}