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

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

interface SeverityBadgeProps {
    severity: string;
    severityConfig?: Record<string, SeverityConfig>;
    showIcon?: boolean;
    className?: string;
}

/**
 * Configuração padrão de severidades
 */
const defaultSeverityConfig: Record<string, SeverityConfig> = {
    baixa: {
        color: 'default',
        label: 'Baixa',
    },
    media: {
        color: 'blue',
        label: 'Média',
    },
    alta: {
        color: 'orange',
        label: 'Alta',
    },
    critica: {
        color: 'red',
        label: 'Crítica',
    },
};

/**
 * Componente para exibir badges de severidade
 *
 * @example
 * ```tsx
 * <SeverityBadge severity="alta" />
 *
 * // Com configuração customizada
 * const customConfig = {
 *   critica: { color: 'red', label: 'Crítico' },
 * };
 * <SeverityBadge severity="critica" severityConfig={customConfig} />
 * ```
 */
export function SeverityBadge({
    severity,
    severityConfig = defaultSeverityConfig,
    showIcon = false,
    className = '',
}: SeverityBadgeProps) {
    const config = severityConfig[severity?.toLowerCase()] || {
        color: 'default',
        label: severity || '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 SeverityBadge;