import 'package:flutter/material.dart';

void main() => runApp(const AulaNavegacao());

class AulaNavegacao extends StatelessWidget {
  const AulaNavegacao({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // Remove a bandeira de debug
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
      ),
      home: const PaginaPrincipal(),
    );
  }
}

class PaginaPrincipal extends StatefulWidget {
  const PaginaPrincipal({super.key});

  @override
  State<PaginaPrincipal> createState() => _PaginaPrincipalState();
}

class _PaginaPrincipalState extends State<PaginaPrincipal> {
  // 1. Variável que controla qual aba está selecionada (começa na 0)
  int abaAtiva = 0;

  // 2. LISTA DE TELAS: O que aparece no centro do app.
  // IMPORTANTE: A ordem aqui deve bater com a ordem dos ícones lá embaixo!
  final List<Widget> minhasTelas = [
    // Tela 0 - Home
    const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.home, size: 100, color: Colors.blue),
          Text("Página Inicial", style: TextStyle(fontSize: 20)),
        ],
      ),
    ),
    // Tela 1 - Busca
    const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.search, size: 100, color: Colors.green),
          Text("Página de Busca", style: TextStyle(fontSize: 20)),
        ],
      ),
    ),
    
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Meu Primeiro App"),
        centerTitle: true,
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      
      // O corpo do Scaffold exibe o item da lista correspondente ao número da abaAtiva
      body: minhasTelas[abaAtiva],

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: abaAtiva, // Diz ao Flutter qual botão destacar
        onTap: (indiceClicado) {
          // O setState é o comando que "manda" o Flutter redesenhar a tela
          // com o novo valor da variável abaAtiva
          setState(() {
            abaAtiva = indiceClicado;
          });
        },
        // A lista de itens deve ter o mesmo tamanho da lista 'minhasTelas'
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "Busca",
          ),
          
        ],
      ),
    );
  }
}