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

/*** 骨架屏：variant 决定占位形状（text 多行 / rect 块 / circle 圆），纯展示无状态 ***/
export function skeleton(props: SkeletonProps): HTMLElement {
  const variant = props.variant ?? 'rect'; // 缺省整块矩形
  if (variant !== 'text') return h('div', { class: `ua-skeleton ua-skeleton-${variant}` }); // 单形状直接返回
  const rows = props.rows ?? 3; // text 行数，末行缩短模拟段落收尾
  const lines: HTMLElement[] = [];
  for (let i = 0; i < rows; i++) lines.push(h('div', { class: `ua-skeleton ua-skeleton-text${i === rows - 1 ? ' ua-last' : ''}` }));
  return h('div', { class: 'ua-skeleton-group' }, ...lines);
}