import React from 'react';

export default function StatusPill({ status }) {
    if (!status) return null;
    
    const statusLower = status.toLowerCase();
    let config = {
        bg: 'bg-gray-50',
        text: 'text-gray-700',
        border: 'border-gray-100',
        dot: 'bg-gray-400'
    };

    if (statusLower === 'active' || statusLower === 'completed' || statusLower === 'success') {
        config = {
            bg: 'bg-emerald-50',
            text: 'text-emerald-700',
            border: 'border-emerald-100',
            dot: 'bg-emerald-500'
        };
    } else if (statusLower === 'inactive' || statusLower === 'deleted' || statusLower === 'terminated' || statusLower === 'failed' || statusLower === 'error') {
        config = {
            bg: 'bg-red-50',
            text: 'text-red-700',
            border: 'border-red-100',
            dot: 'bg-red-500'
        };
    } else if (statusLower === 'pending' || statusLower === 'warning' || statusLower === 'on hold' || statusLower === 'processing') {
        config = {
            bg: 'bg-amber-50',
            text: 'text-amber-700',
            border: 'border-amber-100',
            dot: 'bg-amber-500'
        };
    } else if (statusLower === 'info' || statusLower === 'processing' || statusLower === 'draft') {
        config = {
            bg: 'bg-blue-50',
            text: 'text-blue-700',
            border: 'border-blue-100',
            dot: 'bg-blue-500'
        };
    }

    return (
        <span className={`inline-flex items-center gap-1.5 px-3 py-1 text-[11px] font-bold rounded-full transition-all ${config.bg} ${config.text}`}>
            <span className={`w-1.5 h-1.5 rounded-full ${config.dot}`}></span>
            <span className="uppercase tracking-wider">{status}</span>
        </span>
    );
}