/* Shared Kelp primitives. Loaded as a classic Babel script (window.React). */
const KelpUI = {
    Card({ children, className = '' }) {
        return (
            <div className={`rounded-xl border border-gray-100 bg-white p-4 lg:p-5 ${className}`}>
                {children}
            </div>
        );
    },
    Button({ variant = 'primary', className = '', children, ...props }) {
        const look = variant === 'secondary'
            ? 'inline-flex items-center gap-1.5 text-xs font-bold bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 rounded-full px-3 py-1.5'
            : variant === 'ghost'
                ? 'kelp-btn kelp-btn--ghost'
                : 'kelp-btn';
        return (
            <button className={`${look} ${className}`} {...props}>{children}</button>
        );
    },
    Input(props) {
        return (
            <input
                {...props}
                className={`w-full px-3 py-2.5 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none text-sm bg-white ${props.className || ''}`}
            />
        );
    },
    Label({ children }) {
        return <div className="kelp-label">{children}</div>;
    },
    Stat({ value, label }) {
        return (
            <div>
                <div className="kelp-stat">{value}</div>
                <div className="kelp-muted">{label}</div>
            </div>
        );
    },
    PageHeader({ title, subtitle, action }) {
        return (
            <div className="flex items-end justify-between gap-4 mb-6">
                <div>
                    <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
                    {subtitle ? <p className="text-sm text-gray-500 mt-1">{subtitle}</p> : null}
                </div>
                {action || null}
            </div>
        );
    },
    ListTable({ columns, rows, empty }) {
        return (
            <div className="rounded-2xl border border-gray-200 divide-y divide-gray-100 overflow-hidden bg-white">
                <div className="grid gap-3 px-4 py-2 text-xs font-bold text-gray-400" style={{ gridTemplateColumns: columns.map(() => '1fr').join(' ') }}>
                    {columns.map((column) => <div key={column}>{column}</div>)}
                </div>
                {rows.length === 0 ? <div className="px-4 py-6 text-sm text-gray-500">{empty || 'Nothing here yet'}</div> : rows}
            </div>
        );
    },
};

window.KelpUI = KelpUI;