'use client';

import React from 'react';

const Badge = ({
    children,
    variant = 'default',
    size = 'md',
    className = '',
    ...props
}) => {
    const baseClassName = 'inline-flex items-center font-medium border';
    
    const variants = {
        default: 'bg-neutral-200/80 text-neutral-700 border-neutral-300 dark:bg-neutral-500/10 dark:text-neutral-400 dark:border-neutral-500/20',
        primary: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/20',
        success: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-500/10 dark:text-green-400 dark:border-green-500/20',
        warning: 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-500/10 dark:text-yellow-400 dark:border-yellow-500/20',
        danger: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/20',
        info: 'bg-cyan-100 text-cyan-700 border-cyan-200 dark:bg-cyan-500/10 dark:text-cyan-400 dark:border-cyan-500/20',
        purple: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-500/10 dark:text-purple-400 dark:border-purple-500/20',
        pink: 'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-500/10 dark:text-pink-400 dark:border-pink-500/20',
        orange: 'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-500/10 dark:text-orange-400 dark:border-orange-500/20'
    };
    
    const sizes = {
        sm: 'px-2 py-0.5 rounded-lg text-[12px]',
        md: 'px-2.5 py-0.5 rounded-lg text-[12px]',
        lg: 'px-3 py-1 rounded-lg text-xs'
    };

    return (
        <span
            className={`${baseClassName} ${variants[variant]} ${sizes[size]} ${className}`}
            {...props}
        >
            {children}
        </span>
    );
};

// Predefined badge types for common use cases
export const StatusBadge = ({ status, ...props }) => {
    const statusConfig = {
        active: { variant: 'success', children: 'Active' },
        inactive: { variant: 'default', children: 'Inactive' },
        pending: { variant: 'warning', children: 'Pending' },
        draft: { variant: 'warning', children: 'Draft' },
        verified: { variant: 'success', children: 'Verified' },
        unverified: { variant: 'warning', children: 'Unverified' },
        admin: { variant: 'purple', children: 'Admin' },
        user: { variant: 'default', children: 'User' }
    };

    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: 'Physical Product' },
        digital: { variant: 'purple', children: 'Digital Product' },
        hosting: { variant: 'info', children: 'Hosting' },
        domain: { variant: 'pink', children: 'Domain' }
    };

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

export default Badge;