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

/* 布局（移动端）— 规格 §20；行级 columns 负责等分，列级 span 类负责不等宽覆盖。
   纯排布组件：不绑点击、不带交互角色（规格 §20.6）。 */
export default function Layout({
  gutter = 8,
  columns = 0,
  align = 'start',
  wrap = true,
  children = null,
}) {
  const cls =
    'kole-m-layout' +
    ` kole-m-layout--gutter-${gutter}` +
    (columns ? ` kole-m-layout--cols-${columns}` : '') +
    (align === 'center' ? ' kole-m-layout--align-center' : '') +
    (align === 'end' ? ' kole-m-layout--align-end' : '') +
    (align === 'stretch' ? ' kole-m-layout--align-stretch' : '') +
    (wrap ? '' : ' is-nowrap');

  return <div className={cls}>{children}</div>;
}