import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:elektronika/app/core/themes/colors.dart';

class ColoredButton extends StatelessWidget {
  final String title;
  final Color btnColor;
  final Color txtColor;
  final VoidCallback? callback;
  final double? width;

  ColoredButton({
    required this.title,
    required this.callback,
    this.txtColor = ThemeColor.white,
    this.btnColor = const Color(0xFFEFF0F4),
    this.width = double.infinity,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: this.width,
      height: 48.h,
      child: TextButton(
        style: ButtonStyle(
          // elevation: MaterialStateProperty.all(5),
          shape: MaterialStateProperty.all((RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)))),
          // padding: MaterialStateProperty.all(EdgeInsets.zero),
          backgroundColor: MaterialStateProperty.all(this.btnColor), // <-- Button color
          overlayColor: MaterialStateProperty.resolveWith<Color?>((states) {
            if (states.contains(MaterialState.pressed))
              return this.btnColor == ThemeColor.mainColor ? ThemeColor.grey.withOpacity(0.50) : ThemeColor.mainColor.withOpacity(0.30); // <-- Splash color
            return null;
          }),
        ),
        onPressed: this.callback != null ? () => callback!() : null,
        child: Center(
          child: Text(
            this.title,
            style: new TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.w500,
              color: this.txtColor,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

class MyOutlinedButton extends StatelessWidget {
  final String title;
  final Color btnColor;
  final Color txtColor;
  final VoidCallback? callback;
  final double? width;

  MyOutlinedButton({
    required this.title,
    required this.callback,
    this.txtColor = ThemeColor.white,
    this.btnColor = const Color(0xFFEFF0F4),
    this.width = double.infinity,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: this.width,
      height: 48.h,
      child: OutlinedButton(
        style: ButtonStyle(
          shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0))),
          side: MaterialStateProperty.all(BorderSide(color: btnColor)),
        ),
        onPressed: this.callback != null ? () => callback!() : null,
        child: Text(
          this.title,
          style: new TextStyle(
            fontSize: 14.sp,
            fontWeight: FontWeight.w500,
            color: this.txtColor,
          ),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}
