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

// 语义状态对应的符号（纯装饰，读屏跳过）
const GLYPH: Record<string, string> = { success: '✓', warning: '!', danger: '×', info: 'i' };

/*** 结果页：状态符号 + 标题 + 说明 + 操作区，用于提交完成 / 校验失败 / 无权限等终态页面 ***/
export function result(props: ResultProps): HTMLElement {
  const status = props.status ?? 'info'; // 缺省中性信息
  return h(
    'div',
    { class: `ua-result ua-result-${status}`, role: 'status' }, // role=status 由读屏播报终态
    h('div', { class: 'ua-result-icon', 'aria-hidden': 'true' }, GLYPH[status] ?? 'i'),
    h('div', { class: 'ua-result-title' }, props.title),
    props.description ? h('div', { class: 'ua-result-desc' }, props.description) : null,
    props.extra ? h('div', { class: 'ua-result-extra' }, props.extra) : null, // 操作区：常见为主次按钮
  ) as HTMLElement;
}