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

/*** 卡片容器：可选标题行（含右侧操作区）+ 任意子内容 + 可选底部操作区，bordered / hoverable 控制外观 ***/ 
export function card(props: CardProps, ...children: unknown[]): HTMLElement {
  const cls = `ua-card${props.bordered === false ? ' ua-card-borderless' : ''}${props.hoverable ? ' ua-card-hoverable' : ''}`;
  const head = props.title || props.extra
    ? h(
      'div',
      { class: 'ua-card-head' },
      props.title ? h('h3', { class: 'ua-card-title' }, props.title) : h('span', {}), // 无标题时占位，保证操作区仍靠右
      props.extra ? h('span', { class: 'ua-card-extra' }, props.extra) : null,
    )
    : null;
  return h(
    'div',
    { class: cls },
    head,
    ...children,
    props.footer ? h('div', { class: 'ua-card-foot' }, props.footer) : null, // 底部操作区：右对齐，仅传了才渲染
  ) as HTMLElement;
}