import Header from './Header';
import DataDisplay from './DataDisplay';
import useSerialData from '../hooks/useSerialData';
import { useNomenclatures } from '../contexts/NomenclatureContext';


export default function Main() {
    const { readings, isConnected, error } = useSerialData();
    const { vehicles } = useNomenclatures();
    console.log('Vehicles:', vehicles);
  return (
    <div className="main">
        <div>
            <div className="vehicles">
                { vehicles.map(vehicle => {
                    return (
                        <div key={vehicle.id} className="vehicle-card">
                            <h3>{vehicle.vehicle_number}</h3>     
                        </div>
                    );
                })}
            </div>
        </div>
        <div className="vehicles-data">
            <div className="data-header">
                <h2>Vehicle Data</h2>
            </div>
            <div className="data-list">
                <Header />
                <DataDisplay readings={readings}/>
            </div>
        </div>
    </div>
  );
}