import Gauge from '../instruments/Gauge.jsx'
import { useNMEA } from '../../hooks/useNMEA.js'

export default function EngineData() {
  const { rpm, waterTemp, fuel } = useNMEA()

  return (
    <div style={styles.grid}>
      <Gauge value={rpm} min={0} max={3000} label="RPM" unit="rpm" warning={2500} danger={2800} />
      <Gauge value={waterTemp} min={0} max={120} label="Coolant" unit="°C" warning={85} danger={100} />
      <Gauge value={fuel} min={0} max={100} label="Fuel" unit="%" warning={20} danger={10} />
    </div>
  )
}

const styles = {
  grid: {
    display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
    padding: 16, 
    background: 'var(--glass-bg)',
    backdropFilter: 'blur(var(--glass-blur))',
    WebkitBackdropFilter: 'blur(var(--glass-blur))',
    borderRadius: 'var(--radius-lg)', 
    border: '1px solid rgba(255, 255, 255, 0.1)',
    animation: 'slideInUp 0.3s ease-out',
  }
}