import 'package:flutter/material.dart';
import '../theme/colors.dart';

class CategoryGrid extends StatelessWidget {
  final List<Map<String, String>> categories;
  final String selected;
  final ValueChanged<String> onSelect;

  const CategoryGrid({
    super.key,
    required this.categories,
    required this.selected,
    required this.onSelect,
  });

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 4,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      childAspectRatio: 1.1,
      children: categories.map((cat) {
        final isSelected = selected == cat['name'];
        return GestureDetector(
          onTap: () => onSelect(cat['name']!),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 6),
            decoration: BoxDecoration(
              color: isSelected ? AppColors.brand.withOpacity(0.1) : Colors.white.withOpacity(0.65),
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: isSelected ? AppColors.brand : Colors.white.withOpacity(0.5),
                width: isSelected ? 1.5 : 1,
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(cat['emoji'] ?? '', style: const TextStyle(fontSize: 22)),
                const SizedBox(height: 2),
                Text(
                  cat['name'] ?? '',
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
                    color: isSelected ? AppColors.brand : const Color(0xFF8E8E93),
                  ),
                ),
              ],
            ),
          ),
        );
      }).toList(),
    );
  }
}