'use client';

import React from 'react';

type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';

interface StatusBadgeProps {
  status: StatusType;
  label: string;
  icon?: React.ElementType;
  size?: 'sm' | 'md';
}

const statusConfig: Record<StatusType, { color: string; bg: string; border: string }> = {
  success: {
    color: 'text-performance-green',
    bg: 'bg-performance-green/10',
    border: 'border-performance-green/30',
  },
  warning: {
    color: 'text-warning-amber',
    bg: 'bg-warning-amber/10',
    border: 'border-warning-amber/30',
  },
  error: {
    color: 'text-racing-red',
    bg: 'bg-racing-red/10',
    border: 'border-racing-red/30',
  },
  info: {
    color: 'text-primary-blue',
    bg: 'bg-primary-blue/10',
    border: 'border-primary-blue/30',
  },
  neutral: {
    color: 'text-gray-400',
    bg: 'bg-iron-gray',
    border: 'border-charcoal-outline',
  },
  pending: {
    color: 'text-warning-amber',
    bg: 'bg-warning-amber/10',
    border: 'border-warning-amber/30',
  },
};

/**
 * Status badge component for displaying status indicators.
 * Used for showing status of items like invoices, sponsorships, etc.
 */
export default function StatusBadge({ 
  status, 
  label, 
  icon: Icon,
  size = 'sm',
}: StatusBadgeProps) {
  const config = statusConfig[status];
  const sizeClasses = size === 'sm' 
    ? 'px-2 py-0.5 text-xs' 
    : 'px-3 py-1 text-sm';
  
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full font-medium border ${config.bg} ${config.color} ${config.border} ${sizeClasses}`}>
      {Icon && <Icon className={size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'} />}
      {label}
    </span>
  );
}