text: // Mostre os dados da aplicação, como aprensetado no vídeo
  // Não utilize CSS externo, use o style para mudar as cores
  // Se a situação estiver ativa pinte de verde, inativa vermelho
  // Se o gasto for maior que 10000 mostre uma mensagem
  import React from 'react';
  
  const luana = {
    cliente: 'Luana',
    idade: 27,
    compras: [
      { nome: 'Notebook', preco: 'R$ 2500' },
      { nome: 'Geladeira', preco: 'R$ 3000' },
      { nome: 'Smartphone', preco: 'R$ 1500' },
    ],
    ativa: true,
  };
  
  const mario = {
    cliente: 'Mario',
    idade: 31,
    compras: [
      { nome: 'Notebook', preco: 'R$ 2500' },
      { nome: 'Geladeira', preco: 'R$ 3000' },
      { nome: 'Smartphone', preco: 'R$ 1500' },
      { nome: 'Guitarra', preco: 'R$ 3500' },
    ],
    ativa: false,
  };
  
  const App = () => {
    const dados = luana;
  
    const totalGasto = (produtos) => {
      let total = 0;
      produtos.forEach((item) => {
        const valores = +item.preco.replace('R$ ', '');
        total += valores;
      });
      return total;
    };
  
    return (
      <div>
        <p>Nome: {dados.cliente}</p>
        <p>Idade: {dados.idade}</p>
        <p>
          Situação:{' '}
          <span style={{ color: dados.ativa ? 'green' : 'red' }}>
            {dados.ativa ? ' Ativa' : ' Inativa'}
          </span>
        </p>
        <p>Total gasto: R$ {totalGasto(dados.compras)}</p>
        {totalGasto(dados.compras) > 10000 && <p>Você está gastando muito.</p>}
      </div>
    );
  };
  
  export default App;
  