import 'package:flutter/material.dart';
import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
import 'package:turquessa_mesas_hoster/mvvm/views/home/categorias_navbar.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
  }

  handleTap() {
    print('Tapped');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Column(
          children: [
            Container(
              height: 120,
              width: double.infinity,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: Image.asset('assets/Turquessa.png').image,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              color: Color.fromARGB(255, 47, 208, 229),
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Row(
                children: [
                  Container(
                    width: 80,
                    height: 80,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Center(
                      child: Image.asset('assets/Turquessa.png'),
                    ),
                  ),
                  const SizedBox(width: 20),
                  const Text(
                    'Turquessa',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 26,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(width: 15),
                  Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.white, width: 2),
                    ),
                    child:
                        const Icon(Icons.info, color: Colors.white, size: 20),
                  ),
                ],
              ),
            ),
            const CategoriasNavBar(),
            // Burger menu items
            Expanded(
              child: ListView(
                children: [
                  _buildBurgerItem(
                      "1. HAMBURGUESA SENCILLA",
                      "QUESO, LECHUGA, TOMATE, CEBOLLA, PEPINILLO, MAYONESA, KETCHUP Y ...",
                      "MXN 115.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "2. SINGLE BURGER",
                      "HAMBURGUESA SOLA",
                      "MXN 90.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "3. BACON BURGER",
                      "HAMBURGUESA SENCILLA MÁS TOCINO. PAPAS Y SODA",
                      "MXN 130.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
                ],
              ),
            ),
          ],
        ));
  }
}

Widget _buildBurgerItem(
    String title, String description, String price, String imageUrl) {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 20),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(width: 20),
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Image.network(
            imageUrl,
            width: 120,
            height: 120,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(width: 20),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 10),
              Text(
                description,
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 16,
                ),
              ),
              const SizedBox(height: 20),
              Text(
                price,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(width: 20),
      ],
    ),
  );
}