Renderizado Condicional: El Semáforo

import React, { useState } from 'react';

export default function Semaforo() {
  // 1. Crea el estado 'status' (inicia en 'loading')

  // 2. Define tu objeto de configuración CONFIGS
  
  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>Estado del Sistema</h1>
      
      {/* 3. El contenedor debe cambiar su color de fondo */}
      <div style={{ 
        padding: '30px', 
        borderRadius: '12px',
        marginTop: '20px',
        transition: 'all 0.3s ease'
      }}>
        {/* 4. Muestra aquí el icono y el mensaje */}
      </div>
      
      {/* 5. Agrega los botones para cambiar el estado */}
      <div style={{ marginTop: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button>Éxito</button>
        <button>Error</button>
        <button>Cargando</button>
      </div>
    </div>
  );
}