Create cooling_system

Signed-off-by: Gilbert Algordo <69397216+gilbertalgordo@users.noreply.github.com>

Author: gilbertalgordo

cooling_system

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+
+function CoolingSystem() {
+  const [temperature, setTemperature] = useState(25); // Initial temperature
+  const [coolingEnabled, setCoolingEnabled] = useState(false);
+  const [targetTemperature, setTargetTemperature] = useState(20);
+  const [fanSpeed, setFanSpeed] = useState(0); // 0: off, 1: low, 2: medium, 3: high
+
+  useEffect(() => {
+    let interval;
+
+    if (coolingEnabled) {
+      interval = setInterval(() => {
+        setTemperature((prevTemp) => {
+          if (prevTemp > targetTemperature) {
+            const newTemp = prevTemp - 0.5; // Simulate cooling
+            return newTemp < targetTemperature ? targetTemperature : newTemp;
+          } else if (prevTemp < targetTemperature) {
+            const newTemp = prevTemp + 0.2; // Simulate natural heating
+            return newTemp > targetTemperature ? targetTemperature : newTemp;
+          } else {
+            return prevTemp;
+          }
+        });
+      }, 1000); // Update every second
+    } else {
+      interval = setInterval(() => {
+          setTemperature((prevTemp) => prevTemp + 0.1); // Simulate natural heating
+      }, 1000)
+    }
+
+    return () => clearInterval(interval); // Cleanup interval on unmount or coolingEnabled change
+  }, [coolingEnabled, targetTemperature]);
+
+  useEffect(() => {
+    if (coolingEnabled && temperature > targetTemperature) {
+      if (temperature - targetTemperature > 5) {
+        setFanSpeed(3); // High fan speed
+      } else if (temperature - targetTemperature > 3) {
+        setFanSpeed(2); // Medium fan speed
+      } else {
+        setFanSpeed(1); // Low fan speed
+      }
+    } else {
+      setFanSpeed(0); // Turn off fan
+    }
+  }, [temperature, targetTemperature, coolingEnabled]);
+
+  const handleCoolingToggle = () => {
+    setCoolingEnabled(!coolingEnabled);
+  };
+
+  const handleTargetTemperatureChange = (event) => {
+    const newTarget = parseInt(event.target.value);
+    setTargetTemperature(newTarget);
+  };
+
+  const fanSpeedLabels = {
+    0: 'Off',
+    1: 'Low',
+    2: 'Medium',
+    3: 'High',
+  };
+
+  return (
+    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
+      <h1>Cooling System</h1>
+      <p>Current Temperature: {temperature.toFixed(1)}°C</p>
+      <label>
+        Target Temperature:
+        <input
+          type="number"
+          value={targetTemperature}
+          onChange={handleTargetTemperatureChange}
+          min="15"
+          max="30"
+        />
+      </label>
+      <br />
+      <button onClick={handleCoolingToggle}>
+        {coolingEnabled ? 'Turn Off Cooling' : 'Turn On Cooling'}
+      </button>
+      <p>Cooling: {coolingEnabled ? 'Enabled' : 'Disabled'}</p>
+      <p>Fan Speed: {fanSpeedLabels[fanSpeed]}</p>
+      <div style={{marginTop: '20px'}}>
+        <div style={{width: '200px', height: '20px', backgroundColor: 'lightblue', position: 'relative'}}>
+          <div style={{width: `${(temperature-10)*3.33}%`, height: '100%', backgroundColor: 'red'}}></div>
+        </div>
+        <p>Temperature Visual</p>
+      </div>
+    </div>
+  );
+}
+
+export default CoolingSystem;