import { useNMEA } from '../hooks/useNMEA.js'
import BatteryStatus from '../components/systems/BatteryStatus.jsx'
import EngineData from '../components/systems/EngineData.jsx'
import ServiceHealth from '../components/systems/ServiceHealth.jsx'

export default function Systems() {
  const { battery1, battery2 } = useNMEA()

  return (
    <div style={styles.page}>
      <section>
        <div style={styles.sectionTitle}>Batteries</div>
        <BatteryStatus battery1={battery1} battery2={battery2} />
      </section>

      <section>
        <div style={styles.sectionTitle}>Engine</div>
        <EngineData />
      </section>

      <section>
        <div style={styles.sectionTitle}>Services</div>
        <ServiceHealth />
      </section>
    </div>
  )
}

const styles = {
  page: { padding: 16, display: 'flex', flexDirection: 'column', gap: 20, overflow: 'auto', flex: 1 },
  sectionTitle: { fontWeight: 600, fontSize: 12, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 },
}