Build a Traffic Light

import React, { useState } from 'react';
import TrafficLight from './src/TrafficLight';

export default function App() {
  // State to observe the current light from the TrafficLight component (optional, for demo purposes)
  // In a real app, the TrafficLight would likely manage its own state internally
  // or receive props to control its behavior.
  const [currentLightColor, setCurrentLightColor] = useState('red');

  // This is a simplified way to 'observe' the state for the demo. 
  // A more robust solution might involve the TrafficLight component exposing a callback prop.
  // For this exercise, we'll just let the TrafficLight run independently.

  return (
    <div
      style={{
        fontFamily: 'sans-serif',
        textAlign: 'center',
        padding: '20px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '20px',
      }}
    >
      <h1>Traffic Light Demo</h1>
      <TrafficLight />
      <p>The traffic light is cycling automatically.</p>
    </div>
  );
}