// utils/statusBadge.tsx
interface StatusBadgeProps {
  status: string;
  className?: string;
}

export function StatusBadge({ status, className = "" }: StatusBadgeProps) {
  const getStatusConfig = (status: string) => {
    const config = {
      waiting: {
        gradient: "from-yellow-500 to-amber-500",
        glow: "shadow-lg shadow-yellow-500/20",
        icon: "⏳",
      },
      in_progress: {
        gradient: "from-blue-500 to-cyan-500",
        glow: "shadow-lg shadow-blue-500/20",
        icon: "⚡",
      },
      completed: {
        gradient: "from-green-500 to-emerald-500",
        glow: "shadow-lg shadow-green-500/20",
        icon: "✅",
      },
      cancelled: {
        gradient: "from-red-500 to-pink-500",
        glow: "shadow-lg shadow-red-500/20",
        icon: "❌",
      },
    };

    const defaultConfig = {
      gradient: "from-gray-500 to-slate-500",
      glow: "shadow-lg shadow-gray-500/20",
      icon: "📋",
    };

    return config[status as keyof typeof config] || defaultConfig;
  };

  const { gradient, glow, icon } = getStatusConfig(status);
  const label =
    status.charAt(0).toUpperCase() + status.slice(1).replace("_", " ");

  return (
    <div
      className={`inline-flex items-center px-4 py-2 rounded-2xl bg-gradient-to-r ${gradient} ${glow} border border-white/20 backdrop-blur-sm ${className}`}>
      <span className="text-sm mr-2">{icon}</span>
      <span className="text-white font-semibold text-sm">{label}</span>
    </div>
  );
}
