import 'package:flutter/material.dart';

class TabButton extends StatefulWidget {
  const TabButton({
    Key? key,
    this.tabTitle,
    this.index,
    this.activeIndex,
    this.onCallbackTap,
    this.width = 100,
    this.disableShadow = false,
    this.padding = const EdgeInsets.symmetric(horizontal: 20, vertical: 4),
    this.margin = const EdgeInsets.only(right: 8),
  }) : super(key: key);
  final String? tabTitle;
  final int? index;
  final int? activeIndex;
  final VoidCallback? onCallbackTap;
  final double width;
  final EdgeInsetsGeometry? padding;
  final EdgeInsetsGeometry? margin;
  final bool disableShadow;

  @override
  State<TabButton> createState() => _TabButtonState();
}

class _TabButtonState extends State<TabButton> {
  get isActive => widget.activeIndex == widget.index;

  @override
  Widget build(BuildContext context) {
    const borderRadius = Radius.circular(10);
    const textColorActive = Colors.white;
    const text = TextStyle(color: textColorActive, fontSize: 20);
    return Container(
      height: 40,
      alignment: Alignment.center,
      margin: widget.margin,
      decoration: widget.disableShadow
          ? null
          : BoxDecoration(
              boxShadow: isActive
                  ? [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 10,
                        spreadRadius: 1,
                        offset: const Offset(5, 5),
                      )
                    ]
                  : [],
              // color: Colors.white,
            ),
      child: GestureDetector(
        onTap: widget.onCallbackTap,
        child: Container(
          width: widget.width,
          padding: widget.padding,
          decoration: BoxDecoration(
            color: isActive ? Theme.of(context).primaryColor : Colors.white,
            borderRadius: const BorderRadius.only(
              topLeft: borderRadius,
              topRight: borderRadius,
            ),
          ),
          child: Center(
            child: Text(
              widget.tabTitle ?? '',
              style: isActive ? text : text.copyWith(color: Colors.black87),
            ),
          ),
        ),
      ),
    );
  }
}
