import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../blocs/view_orders_cubit.dart';

/// A single filter tab for the View Orders page.
///
/// Displays a label with an optional count and shows a selection indicator
/// when the tab is active.
class ViewOrdersFilterTab extends StatelessWidget {
  /// Creates a [ViewOrdersFilterTab].
  const ViewOrdersFilterTab({
    required this.label,
    required this.isSelected,
    required this.tabId,
    this.count,
    super.key,
  });

  /// The label text to display.
  final String label;

  /// Whether this tab is currently selected.
  final bool isSelected;

  /// The unique identifier for this tab.
  final String tabId;

  /// Optional count to display next to the label.
  final int? count;

  @override
  Widget build(BuildContext context) {
    String text = label;
    if (count != null) {
      text = '$label ($count)';
    }

    return GestureDetector(
      onTap: () =>
          BlocProvider.of<ViewOrdersCubit>(context).selectFilterTab(tabId),
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(bottom: UiConstants.space2),
            child: Text(
              text,
              style: UiTypography.body2m.copyWith(
                color: isSelected ? UiColors.primary : UiColors.textSecondary,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            height: 2,
            width: isSelected ? 40 : 0,
            decoration: BoxDecoration(
              color: UiColors.primary,
              borderRadius: UiConstants.radiusXs,
            ),
          ),
          if (!isSelected) const SizedBox(height: 2),
        ],
      ),
    );
  }
}
