import React from 'react'
import { StatusWidget } from './StatusWidget'
import { formatUptime } from '../services/api'
import type { SystemStatus } from '../services/api'

interface SystemHealthWidgetProps {
  systemStatus: SystemStatus | null
}

export const SystemHealthWidget: React.FC<SystemHealthWidgetProps> = ({ systemStatus }) => {
  const isOnline = systemStatus?.system_started ?? false
  const uptime = systemStatus?.uptime_seconds ?? 0

  return (
    <StatusWidget
      title="System Status"
      status={isOnline}
      statusText={isOnline ? 'Online' : 'Offline'}
      subtitle={uptime > 0 ? `Uptime: ${formatUptime(uptime)}` : undefined}
      icon={
        <div className={`w-3 h-3 rounded-full ${isOnline ? 'bg-green-500' : 'bg-red-500'}`} />
      }
    />
  )
}