import React, { useState, useEffect } from 'react';
import { Activity, ShieldCheck, Server } from 'lucide-react';

const SystemHealth = () => {
  const [status, setStatus] = useState({ loading: true, online: false, data: null });

  useEffect(() => {
    const checkKernel = async () => {
      try {
        const response = await fetch('/api/status');
        const data = await response.json();
        setStatus({ loading: false, online: true, data });
      } catch (error) {
        setStatus({ loading: false, online: false, data: null });
      }
    };
    checkKernel();
  }, []);

  return (
    <div className="p-4 bg-slate-900/80 border border-slate-800 rounded-xl space-y-3">
      <div className="flex items-center justify-between">
        <span className="text-[10px] font-black uppercase tracking-widest text-slate-500">Kernel Link</span>
        {status.online ? (
          <span className="flex items-center gap-1 text-[9px] font-bold text-emerald-500 uppercase">
            <ShieldCheck className="w-3 h-3" /> Secure
          </span>
        ) : (
          <span className="text-[9px] font-bold text-red-500 uppercase">Disconnected</span>
        )}
      </div>

      <div className="flex items-center gap-4">
        <div className={`p-2 rounded-lg ${status.online ? 'bg-emerald-500/10' : 'bg-slate-800'}`}>
          <Server className={`w-4 h-4 ${status.online ? 'text-emerald-500' : 'text-slate-600'}`} />
        </div>
        <div>
          <p className="text-[11px] font-mono text-slate-300">
            {status.data?.kernel || 'Checking...'}
          </p>
          <p className="text-[9px] text-slate-500 uppercase font-bold">
            {status.data?.vault_encryption || 'Initializing Vault'}
          </p>
        </div>
      </div>
    </div>
  );
};

export default SystemHealth;