'use client';

import React from 'react';

const Badge = ({
    children,
    variant = 'default',
    size = 'sm',
    color = null,
    dot = false,
    onRemove,
    className = '',
    ...props
}) => {
    const baseClassName = 'inline-flex items-center gap-1 font-medium border font-ibm-plex-mono';

    const variants = {
        default: 'bg-neutral-700/10 text-neutral-700 border-neutral-800/30 dark:bg-neutral-600/10 dark:text-neutral-400 dark:border-neutral-800',
        primary: 'bg-blue-700/10 text-blue-700 border-blue-800/30 dark:bg-blue-600/10 dark:text-blue-600 dark:border-blue-600/20',
        success: 'bg-green-700/10 text-green-700 border-green-800/30 dark:bg-green-600/10 dark:text-green-600 dark:border-green-600/20',
        warning: 'bg-yellow-700/10 text-yellow-700 border-yellow-800/30 dark:bg-yellow-600/10 dark:text-yellow-600 dark:border-yellow-600/20',
        danger: 'bg-red-700/10 text-red-700 border-red-800/30 dark:bg-red-600/10 dark:text-red-600 dark:border-red-600/20',
        info: 'bg-cyan-700/10 text-cyan-700 border-cyan-800/30 dark:bg-cyan-600/10 dark:text-cyan-600 dark:border-cyan-600/20',
        purple: 'bg-purple-700/10 text-purple-700 border-purple-800/30 dark:bg-purple-600/10 dark:text-purple-600 dark:border-purple-600/20',
        pink: 'bg-pink-700/10 text-pink-700 border-pink-800/30 dark:bg-pink-600/10 dark:text-pink-600 dark:border-pink-600/20',
        orange: 'bg-orange-700/10 text-orange-700 border-orange-800/30 dark:bg-orange-600/10 dark:text-orange-600 dark:border-orange-600/20'
    };

    const sizes = {
        sm: 'px-[8px] py-[2px] rounded-full text-[11px]',
        md: 'px-[8px] py-[2px] rounded-full text-[11px]',
        lg: 'px-3 py-1 rounded-full text-xs'
    };

    const variantClass = color ? '' : (variants[variant] || variants.default);
    const colorStyle = color ? {
        backgroundColor: `${color}1a`,
        color: color,
        borderColor: `${color}33`,
    } : {};

    return (
        <span
            className={`${baseClassName} ${variantClass} ${sizes[size]} ${className}`.trim()}
            style={colorStyle}
            {...props}
        >
            {dot && color && (
                <span className="inline-block w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: color }} />
            )}
            {children}
            {onRemove && (
                <button
                    type="button"
                    onClick={(e) => { e.stopPropagation(); onRemove(); }}
                    className="ml-0.5 hover:opacity-70 transition-opacity leading-none"
                    aria-label="Retirer"
                >
                    ×
                </button>
            )}
        </span>
    );
};

// Predefined badge types for common use cases
export const StatusBadge = ({ status, ...props }) => {
    const statusConfig = {
        active: { variant: 'success', children: 'actif' },
        inactive: { variant: 'default', children: 'inactif' },
        pending: { variant: 'warning', children: 'en attente' },
        draft: { variant: 'warning', children: 'brouillon' },
        verified: { variant: 'success', children: 'vérifié' },
        unverified: { variant: 'warning', children: 'non vérifié' },
        admin: { variant: 'purple', children: 'admin' },
        user: { variant: 'default', children: 'utilisateur' }
    };

    const config = statusConfig[status] || { variant: 'default', children: status };
    
    return <Badge {...config} {...props} />;
};

export const TypeBadge = ({ type, ...props }) => {
    const typeConfig = {
        service: { variant: 'primary', children: 'service' },
        physical: { variant: 'orange', children: 'produit physique' },
        digital: { variant: 'purple', children: 'produit numérique' },
        hosting: { variant: 'info', children: 'hébergement' },
        domain: { variant: 'pink', children: 'domaine' }
    };

    const config = typeConfig[type] || { variant: 'default', children: type };
    
    return <Badge {...config} {...props} />;
};

export default Badge;