import React from 'react';
import { LucideIcon } from 'lucide-react';

interface StatusBadgeProps {
  status: string;
  config?: {
    icon: LucideIcon;
    color: string;
    bg: string;
    border: string;
    label: string;
  };
  className?: string;
}

export const StatusBadge = ({ status, config, className = '' }: StatusBadgeProps) => {
  const defaultConfig = {
    scheduled: {
      icon: () => null,
      color: 'text-primary-blue',
      bg: 'bg-primary-blue/10',
      border: 'border-primary-blue/30',
      label: 'Scheduled',
    },
    running: {
      icon: () => null,
      color: 'text-performance-green',
      bg: 'bg-performance-green/10',
      border: 'border-performance-green/30',
      label: 'LIVE',
    },
    completed: {
      icon: () => null,
      color: 'text-gray-400',
      bg: 'bg-gray-500/10',
      border: 'border-gray-500/30',
      label: 'Completed',
    },
    cancelled: {
      icon: () => null,
      color: 'text-warning-amber',
      bg: 'bg-warning-amber/10',
      border: 'border-warning-amber/30',
      label: 'Cancelled',
    },
  };

  const badgeConfig = config || defaultConfig[status as keyof typeof defaultConfig] || {
    icon: () => null,
    color: 'text-gray-400',
    bg: 'bg-gray-500/10',
    border: 'border-gray-500/30',
    label: status,
  };

  const Icon = badgeConfig.icon;

  return (
    <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${badgeConfig.bg} ${badgeConfig.border} border ${className}`}>
      {Icon && <Icon className={`w-3.5 h-3.5 ${badgeConfig.color}`} />}
      <span className={`text-xs font-medium ${badgeConfig.color}`}>
        {badgeConfig.label}
      </span>
    </div>
  );
};