Conditional Rendering: The Traffic Light

import React, { useState } from 'react';

export default function TrafficLight() {
  // 1. Create the 'status' state (starts as 'loading')

  // 2. Define your CONFIGS object

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>System Status</h1>

      {/* 3. The container background must change with the status */}
      <div style={{
        padding: '30px',
        borderRadius: '12px',
        marginTop: '20px',
        transition: 'all 0.3s ease'
      }}>
        {/* 4. Show the icon and the message here */}
      </div>

      {/* 5. Wire the buttons so they change the status */}
      <div style={{ marginTop: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button>Success</button>
        <button>Error</button>
        <button>Loading</button>
      </div>
    </div>
  );
}