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

/* 链接（移动端）— 规格 §21；有 href 时渲染原生 <a>（可键盘聚焦、可长按复制），
   无 href 时渲染 <button type="button">（只触发事件、不跳转）。 */
export default function Link({
  tone = 'brand',
  underline = false,
  disabled = false,
  href = '',
  text = '',
  block = false,
  onClick,
  children = null,
}) {
  const cls =
    'kole-m-link' +
    (tone === 'default' ? ' kole-m-link--default' : '') +
    (tone === 'danger' ? ' kole-m-link--danger' : '') +
    (tone === 'success' ? ' kole-m-link--success' : '') +
    (underline ? ' kole-m-link--underline' : '') +
    (block ? ' is-block' : '') +
    (disabled ? ' is-disabled' : '');

  /* 规格 §21.6：禁用链接不能用 href（否则仍可被打开），且要移出 tab 序列 */
  const content = <span className="kole-m-link__label">{text || children}</span>;

  if (href && !disabled) {
    return (
      <a className={cls} href={href} onClick={onClick ? () => onClick() : undefined}>
        {content}
      </a>
    );
  }
  return (
    <button
      className={cls}
      type="button"
      disabled={disabled}
      aria-disabled={disabled ? 'true' : 'false'}
      onClick={() => {
        if (disabled) return;
        if (onClick) onClick();
      }}
    >
      {content}
    </button>
  );
}