interface GoogleCalendarCardProps {
  isConnected: boolean;
  connectedEmail?: string | null;
  credentialId?: string | null;
  credentialName?: string | null;
  onConnect: () => void;
  connecting?: boolean;
}

export default function GoogleCalendarCard({
  isConnected,
  connectedEmail,
  credentialId,
  credentialName,
  onConnect,
  connecting = false,
}: GoogleCalendarCardProps) {
  return (
    <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-white">Google Calendar</h3>
        <div
          className={`px-3 py-1 rounded-full text-sm font-medium ${
            connecting
              ? "bg-yellow-500/10 text-yellow-500"
              : isConnected
                ? "bg-green-500/10 text-green-500"
                : "bg-gray-500/10 text-gray-400"
          }`}
        >
          {connecting ? (
            <span className="flex items-center gap-2">
              <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-yellow-500" />
              Conectando...
            </span>
          ) : isConnected ? (
            "Conectado ✅"
          ) : (
            "Não conectado ❌"
          )}
        </div>
      </div>

      {connectedEmail && (
        <div className="space-y-2 mb-4">
          <p className="text-gray-400 text-sm">
            📧 Conectado como:{" "}
            <span className="text-white">{connectedEmail}</span>
          </p>
          {credentialName && (
            <p className="text-gray-400 text-sm">
              🔑 Credencial n8n:{" "}
              <span className="text-green-400 font-mono">{credentialName}</span>
            </p>
          )}
          {credentialId && (
            <p className="text-gray-500 text-xs font-mono">
              ID: {credentialId}
            </p>
          )}
        </div>
      )}

      <button
        type="button"
        onClick={onConnect}
        disabled={connecting}
        className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {connecting ? "Conectando..." : isConnected ? "Reconectar" : "Conectar"}
      </button>
    </div>
  );
}