/// Widget: Category Filter Chips
///
/// Horizontal scrolling filter chips for product categories.
library;

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/products/domain/entities/category.dart';
import 'package:worker/features/products/presentation/providers/selected_category_provider.dart';

/// Category Filter Chips Widget
///
/// Displays categories as horizontally scrolling chips.
/// Updates selected category when tapped.
class CategoryFilterChips extends ConsumerWidget {
  final List<Category> categories;

  const CategoryFilterChips({super.key, required this.categories});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final selectedCategory = ref.watch(selectedCategoryProvider);

    return SizedBox(
      height: 48.0,
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
        itemCount: categories.length,
        separatorBuilder: (context, index) =>
            const SizedBox(width: AppSpacing.sm),
        itemBuilder: (context, index) {
          final category = categories[index];
          final isSelected = selectedCategory == category.id;

          return FilterChip(
            label: Text(
              category.name,
              style: TextStyle(
                fontSize: 14.0,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
                color: isSelected ? AppColors.white : AppColors.grey900,
              ),
            ),
            selected: isSelected,
            onSelected: (selected) {
              if (selected) {
                ref
                    .read(selectedCategoryProvider.notifier)
                    .updateCategory(category.id);
              }
            },
            backgroundColor: AppColors.white,
            selectedColor: AppColors.primaryBlue,
            checkmarkColor: AppColors.white,
            side: BorderSide(
              color: isSelected ? AppColors.primaryBlue : AppColors.grey100,
              width: isSelected ? 2.0 : 1.0,
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(AppRadius.button),
            ),
            padding: const EdgeInsets.symmetric(
              horizontal: AppSpacing.md,
              vertical: AppSpacing.sm,
            ),
            elevation: isSelected ? AppElevation.low : 0,
            showCheckmark: false,
          );
        },
      ),
    );
  }
}
