Untitled

return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Charging Simulation</h1>
      <div className="flex flex-wrap gap-4 mb-6">
        <div>
          <label>Number of Chargers:</label>
          <input
            type="number"
            value={numChargers}
            onChange={(e) => setNumChargers(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Charging Power (kW):</label>
          <input
            type="number"
            value={chargingPower}
            onChange={(e) => setChargingPower(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Cars Per Hour:</label>
          <input
            type="number"
            value={carsPerHour}
            onChange={(e) => setCarsPerHour(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Consumption Per Car (kWh):</label>
          <input
            type="number"
            value={consumption}
            onChange={(e) => setConsumption(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Simulation Hours:</label>
          <input
            type="number"
            value={simulationHours}
            onChange={(e) => setSimulationHours(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
      </div>
      <button
        onClick={simulateCharging}
        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
      >
        Run Simulation
      </button>

      {results.length > 0 && (
        <div className="mt-6">
          <h2 className="text-xl font-bold mb-4">Simulation Results</h2>
          <Bar data={chartData} />
        </div>
      )}
    </div>
  );