import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import '../../../../common/theme/theme.dart';
import '../../../../sample/product_sample_data.dart';
import '../../../components/card/product_card.dart';
import '../../../components/card/product_empty_card.dart';
import '../../../router/app_router.gr.dart';

class MenuProductSection extends StatelessWidget {
  final ProductCategory category;
  final List<Product> categoryProducts;
  const MenuProductSection({
    super.key,
    required this.category,
    required this.categoryProducts,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Section header
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
            child: Row(
              children: [
                Text(category.icon, style: AppStyle.h5),
                SizedBox(width: 8),
                Text(
                  category.name,
                  style: AppStyle.lg.copyWith(
                    fontWeight: FontWeight.bold,
                    color: AppColor.textPrimary,
                  ),
                ),
                SizedBox(width: 8),
                Text(
                  "(${categoryProducts.length})",
                  style: AppStyle.md.copyWith(color: AppColor.textSecondary),
                ),
              ],
            ),
          ),

          // Products grid
          if (categoryProducts.isEmpty)
            ProductEmptyCard()
          else
            GridView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              padding: EdgeInsets.symmetric(horizontal: 16),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
                childAspectRatio: 0.75,
              ),
              itemCount: categoryProducts.length,
              itemBuilder: (context, index) {
                return ProductCard(
                  product: categoryProducts[index],
                  onTap: () => context.router.push(
                    MenuDetailRoute(product: categoryProducts[index]),
                  ),
                );
              },
            ),
        ],
      ),
    );
  }
}