import React from 'react';
import './Typography.css';

/* 排版（移动端）— 规格 §37
   静态文字组件：层级（title / body / assist / secondary）、单行省略、可复制。
   复制动作由宿主完成（onCopy 回调里写剪贴板），组件只渲染按钮与反馈位 is-copied。
   根与文字节点不带指针语义，唯一可点元素是原生 button。 */
export default function Typography({
  level = 'body',
  ellipsis = false,
  copyable = false,
  copyText = '复制',
  copiedText = '已复制',
  text = '',
  copied = false,
  onCopy,
  children = null,
}) {
  const content = text || children;
  const cls =
    'kole-m-typography' +
    ` kole-m-typography--${level}` +
    (ellipsis ? ' kole-m-typography--ellipsis' : '') +
    (copyable ? ' kole-m-typography--copyable' : '') +
    (copied ? ' is-copied' : '');

  return (
    <div className={cls}>
      <span className="kole-m-typography__text">{content}</span>
      {copyable ? (
        <button
          className="kole-m-typography__copy"
          type="button"
          aria-label={copied ? copiedText : copyText}
          onClick={() => {
            if (onCopy) onCopy();
          }}
        >
          {copied ? copiedText : copyText}
        </button>
      ) : null}
    </div>
  );
}