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

/*** 提示条：variant 决定语义色，可选标题与关闭按钮；关闭即退场并从 DOM 移除（内容由调用方持有） ***/
export function alert(props: AlertProps): HTMLElement {
  const body = h(
    'div',
    { class: 'ua-alert-body' },
    props.title ? h('div', { class: 'ua-alert-title' }, props.title) : null,
    h('div', { class: 'ua-alert-message' }, props.message),
  );
  const el = h('div', { class: `ua-alert ua-alert-${props.variant ?? 'info'}`, role: 'alert' }, body);

  if (!props.closable) return el; // 纯展示形态
  el.append(
    h(
      'button',
      {
        type: 'button',
        class: 'ua-alert-close',
        'aria-label': '关闭提示',
        onClick: () => {
          el.classList.add('ua-alert-out');                                   // 先退场
          window.setTimeout(() => el.isConnected && el.remove(), 200);        // 过渡结束再摘除
          props.onClose?.();
        },
      },
      '×',
    ),
  );
  return el;
}