import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CustomTabSelector extends StatefulWidget {
  final List<String> options;
  final int initialIndex;
  final ValueChanged<int> onChanged;

  const CustomTabSelector({
    Key? key,
    required this.options,
    required this.initialIndex,
    required this.onChanged,
  }) : super(key: key);

  @override
  _CustomTabSelectorState createState() => _CustomTabSelectorState();
}

class _CustomTabSelectorState extends State<CustomTabSelector> {
  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    _selectedIndex = widget.initialIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("sc_images/room/sc_icon_red_envelope_config_tab_bg.png"),
          fit: BoxFit.fill,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children:
            widget.options.asMap().entries.map((entry) {
              final index = entry.key;
              final title = entry.value;
              final isSelected = index == _selectedIndex;

              return GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  setState(() {
                    _selectedIndex = index;
                  });
                  widget.onChanged(index);
                },
                child: Container(
                  width: 72.w,
                  height: 32.w,
                  decoration:
                      isSelected
                          ? BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage(
                                "sc_images/room/sc_icon_red_envelope_config_tab_item_bg.png",
                              ),
                              fit: BoxFit.fill,
                            ),
                          )
                          : null,
                  child: Container(
                    alignment: Alignment.center,
                    child: Text(
                      title,
                      textAlign: TextAlign.center,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: isSelected ? 15.sp : 13.sp,
                        fontFamily: 'MyCustomFont',
                        fontWeight:
                            isSelected ? FontWeight.w600 : FontWeight.w500,
                      ),
                    ),
                  ),
                ),
              );
            }).toList(),
      ),
    );
  }
}