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

/* 单元格（移动端）— 规格 §7；link=true 时用原生 button（整行热区、可键盘聚焦） */
export default function Cell({
  title = '',
  desc = '',
  value = '',
  arrow = false,
  link = false,
  borderless = false,
  disabled = false,
  onClick,
  children = null,
  icon = null,
}) {
  const cls =
    'kole-m-cell' +
    (link ? ' kole-m-cell--link' : '') +
    (borderless ? ' kole-m-cell--borderless' : '') +
    (disabled ? ' is-disabled' : '');

  const inner = (
    <>
      {icon ? <span className="kole-m-cell__icon">{icon}</span> : null}
      <span className="kole-m-cell__main">
        <span className="kole-m-cell__title">{title}</span>
        {desc ? <span className="kole-m-cell__desc">{desc}</span> : null}
      </span>
      {children || (value ? <span className="kole-m-cell__value">{value}</span> : null)}
      {arrow ? (
        <span className="kole-m-cell__arrow" aria-hidden="true">
          ›
        </span>
      ) : null}
    </>
  );

  /* 可点单元格用原生 button（规格 §7.6）；纯展示用 div */
  if (link) {
    return (
      <button
        className={cls}
        type="button"
        disabled={disabled}
        onClick={() => {
          if (disabled) return;
          if (onClick) onClick();
        }}
      >
        {inner}
      </button>
    );
  }
  return (
    <div className={cls} aria-disabled={disabled ? 'true' : undefined}>
      {inner}
    </div>
  );
}