import { h } from '@ui-arch/frame';
import type { MasonryProps } from './types.js';

/*** 瀑布流：CSS 多列布局，列数按容器宽度自适应或显式指定；每项单独包一层才能 break-inside 不拆断 ***/
export function masonry(props: MasonryProps): HTMLElement {
  // —— 状态集中声明 ——
  const adaptive = !props.columns; // 未指定列数即自适应（column-width 让浏览器自己算列数）
  const width = props.minColumnWidth ?? 240; // 自适应时的最小列宽（像素）
  const gap = props.gap ?? 'var(--ua-space-3)'; // 列间距与行间距同源，避免两处各写一份
  const root = h('div', { class: 'ua-masonry' }) as HTMLElement;
  root.style.columnGap = gap;
  if (adaptive) root.style.columnWidth = `${width}px`; // 自适应：容器越宽列数越多，窄屏自动降到一列
  else root.style.columnCount = String(props.columns); // 显式列数：与 column-width 互斥，固定几列就几列

  props.items.forEach((item) => {
    const cell = h('div', { class: 'ua-masonry-item' }, item);
    cell.style.marginBottom = gap; // 行间距与列间距同值，视觉上才是均匀网格
    root.append(cell);
  });
  return root;
}