import 'package:flutter/material.dart';

const List<Map<String, dynamic>> items = [
  {
    'nombre': 'Hamburguesa de res',
    'descripcion': 'Hamburguesa de res con queso cheddar',
    'precio': '\$ 120.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
];

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

  @override
  State<CarritoScreen> createState() => _CarritoScreenState();
}

class _CarritoScreenState extends State<CarritoScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Atrás'),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Su carrito',
                  style: TextStyle(
                      fontStyle: FontStyle.italic,
                      fontSize: 16,
                      color: Colors.black54),
                ),
                Text(
                  'Total: \$0.00',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      body: ListView.builder(
          itemBuilder: (context, index) {
            final item = items[index];
            return _buildInfoItem(item['nombre'], item['descripcion'],
                item['precio'], item['imageUrl']);
          },
          itemCount: items.length),
    );
  }
}

_buildInfoItem(String title, String subtitle, String precio, String imageUrl) {
  return Container(
    height: 90,
    width: double.infinity,
    color: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    child: Row(
      children: [
        // Leading image
        Container(
          width: 80,
          height: 80,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Image.network(
              imageUrl,
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(width: 16),
        // Title and subtitle
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                title,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 4),
              Text(
                'MXN $precio',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        // Quantity controls
        Row(
          children: [
            Container(
              width: 40,
              height: 40,
              alignment: Alignment.center,
              child: Icon(
                Icons.remove,
                color: Colors.black,
                size: 24,
              ),
            ),
            Container(
              width: 40,
              alignment: Alignment.center,
              child: Text(
                subtitle,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Container(
              width: 40,
              height: 40,
              alignment: Alignment.center,
              child: Icon(
                Icons.add,
                color: Colors.red,
                size: 24,
              ),
            ),
          ],
        ),
      ],
    ),
  );
}