import React from 'react';
import { SystemStatus } from '../types';

interface SystemStatusCardProps {
  status: SystemStatus | null;
}

export const SystemStatusCard: React.FC<SystemStatusCardProps> = ({ status }) => {
  const host = status?.host || 'supabase.marc-wieland.de';
  const latency = status?.latencyMs ?? 18;

  return (
    <div className="content-card">
      <h2 className="card-heading">Supabase System-Status</h2>
      <p className="status-panel-description">
        Datenbank-Verbindung und Realtime-Sync laufen stabil.
      </p>

      <div className="status-details-box">
        <div className="status-item">
          <span className="status-key">DB Host:</span>
          <span className="status-val">{host}</span>
        </div>

        <div className="status-item">
          <span className="status-key">Latency:</span>
          <span className="status-val">{latency}ms</span>
        </div>

        <div className="status-item">
          <span className="status-key">Letzter Sync:</span>
          <span className="status-val">Vor wenigen Sekunden</span>
        </div>
      </div>
    </div>
  );
};
