import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart';

class FilterWidget extends StatelessWidget {
  const FilterWidget({
    super.key,
    required this.size,
    required this.tabs,
    required this.selectedIndex,
    required this.onTabChanged,
  });

  final Size size;
  final List<String> tabs;
  final int selectedIndex;
  final Function(int) onTabChanged;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: containerDecoration,
      height: 40,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: tabs.length,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          final isSelected = index == selectedIndex;
          return InkWell(
            onTap: () {
              onTabChanged(index);
            },
            child: Container(
              decoration: BoxDecoration(
                color: ColorsManager.boxColor,
                border: Border.all(
                  color: isSelected
                      ? ColorsManager.blueColor.withOpacity(0.8)
                      : Colors.transparent,
                  width: 2.0,
                ),
                borderRadius: _getBorderRadius(index),
              ),
              padding: const EdgeInsets.only(left: 10, right: 10),
              child: Center(
                child: Text(
                  tabs[index],
                  style: TextStyle(
                    color: isSelected
                        ? ColorsManager.blueColor.withOpacity(0.8)
                        : Colors.black,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }

  BorderRadius? _getBorderRadius(int index) {
    if (index == 0) {
      return const BorderRadius.only(
        topLeft: Radius.circular(10),
        bottomLeft: Radius.circular(10),
      );
    } else if (index == tabs.length - 1) {
      return const BorderRadius.only(
        topRight: Radius.circular(10),
        bottomRight: Radius.circular(10),
      );
    }
    return null;
  }
}
