// Import necessary libraries
import React from "react";
import ReactDOM from "react-dom"; // Use the correct casing for ReactDOM

// Get the current date and time
const myDate = new Date();
const hrs = myDate.getHours(); // Get the current hour

let greet; // Variable to hold the greeting message
let color; // Variable to hold the color for inline styling

// Determine the greeting and corresponding color based on the current hour
if (hrs < 12) { 
    // "Good Morning!" if before 12:PM and color: red
    greet = "Good Morning!";
    color = { color: "red" };
} else if (hrs >= 12 && hrs < 18) { // "Good Afternoon!" if between 12:PM and 6:PM and color: green
    greet = "Good Afternoon!";
    color = { color: "green" };
} else { // "Good Evening!" if between 6:PM and midnight and color: blue
    greet = "Good Evening!";
    color = { color: "blue" };
}

// Render the greeting in the DOM
ReactDOM.render(
    <div className="heading">
        <h1 style={color}>{greet}</h1>
    </div>,
    document.getElementById("root") // Ensure there's an element with id 'root' in your index.html
);