/**
 * Hoover — components/data.js
 *
 * Data display components: Badge, StatusDot, Empty, Card.
 */

import { h } from '../vdom.js';

/**
 * Colored badge/span.
 *
 * @param {object} props
 * @param {string} props.text    – Badge text
 * @param {string} [props.variant] – 'info' | 'success' | 'warning' | 'danger'
 */
export function Badge(props = {}) {
    return h('span', { class: `badge badge-${props.variant || 'info'}` }, String(props.text || ''));
}

/**
 * Status indicator dot.
 *
 * @param {object} props
 * @param {string} props.status – 'success' | 'up' | 'danger' | 'down' | 'pending'
 */
export function StatusDot(props = {}) {
    const v = ['success', 'up'].includes(props.status) ? 'up' :
              ['danger', 'down'].includes(props.status) ? 'down' : 'pending';
    return h('span', { class: `status-dot status-${v}` });
}

/**
 * Empty-state placeholder card.
 *
 * @param {object} props
 * @param {string} [props.text]
 */
export function Empty(props = {}) {
    return h('div', { class: 'card' },
        h('div', { class: 'text-muted text-sm' }, props.text || 'No data available'),
    );
}

/**
 * Card wrapper with optional header and body content.
 *
 * @param {object} props
 * @param {string} [props.header]
 * @param {VNode[]} [props.children]
 */
export function Card(props = {}) {
    if (props.header) {
        return h('div', { class: 'card' },
            h('div', { class: 'card-header' }, props.header),
            h('div', { class: 'card-body' }, props.children || []),
        );
    }
    return h('div', { class: 'card' }, props.children || []);
}