import React from 'react';
import { Tag } from 'antd';

export interface StatusConfig {
    color: string;
    label: string;
    icon?: React.ReactNode;
}

interface StatusBadgeProps {
    status: string;
    statusConfig: Record<string, StatusConfig>;
    showIcon?: boolean;
    className?: string;
}

/**
 * Badge canónico de status de domínio (Ant Design `Tag` + mapa `statusConfig`).
 * Preferir este componente a `BadgeStatus` (legado / tipografia SCSS sem consumidores).
 *
 * @example
 * ```tsx
 * const statusConfig = {
 *   ativo: { color: 'success', label: 'Ativo' },
 *   inativo: { color: 'default', label: 'Inativo' },
 * };
 *
 * <StatusBadge status="ativo" statusConfig={statusConfig} />
 * ```
 */
export function StatusBadge({
    status,
    statusConfig,
    showIcon = false,
    className = '',
}: StatusBadgeProps) {
    const config = statusConfig[status?.toLowerCase()] || {
        color: 'default',
        label: status || 'N/A',
        icon: null,
    };

    return (
        <Tag color={config.color} className={className}>
            {showIcon && config.icon && <span style={{ marginRight: 4 }}>{config.icon}</span>}
            {config.label}
        </Tag>
    );
}

export default StatusBadge;