"use client";

interface WhatsAppInstanceCardProps {
  instance: string;
  status: "connected" | "disconnected" | "error";
  error?: string;
  onGenerateQR?: () => void;
  onDisconnect?: () => void;
}

export default function WhatsAppInstanceCard({
  instance,
  status,
  error,
  onGenerateQR,
  onDisconnect,
}: WhatsAppInstanceCardProps) {
  const statusConfig = {
    connected: {
      badge: "Connected",
      color: "bg-green-500",
      textColor: "text-green-400",
    },
    disconnected: {
      badge: "Disconnected",
      color: "bg-red-500",
      textColor: "text-red-400",
    },
    error: {
      badge: "Error",
      color: "bg-yellow-500",
      textColor: "text-yellow-400",
    },
  };

  const config = statusConfig[status];

  return (
    <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 hover:border-primary-500 transition-colors">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-white">{instance}</h3>
        <span
          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color} text-white`}
        >
          {config.badge}
        </span>
      </div>

      {/* Error Message (if any) */}
      {error && (
        <div className="mb-4 p-2 bg-red-900/20 border border-red-800 rounded text-sm text-red-400">
          {error}
        </div>
      )}

      {/* Actions - Will be implemented in next stories */}
      <div className="flex gap-2">
        {status === "disconnected" && (
          <button
            type="button"
            onClick={onGenerateQR}
            className="flex-1 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white text-sm font-medium rounded-md transition-colors"
          >
            Gerar QR Code
          </button>
        )}
        {status === "connected" && (
          <button
            type="button"
            onClick={onDisconnect}
            className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition-colors"
          >
            Desconectar
          </button>
        )}
        {status === "error" && (
          <button
            type="button"
            disabled
            className="flex-1 px-4 py-2 bg-gray-700 text-gray-400 text-sm font-medium rounded-md cursor-not-allowed"
          >
            Indisponível
          </button>
        )}
      </div>
    </div>
  );
}