import 'package:flutter/material.dart';
import '../theme/app_colors.dart';

class GradientButton extends StatelessWidget {
  final String text;
  final VoidCallback? onPressed;
  final double width;
  final double height;
  final bool isLoading;

  const GradientButton({
    super.key,
    required this.text,
    this.onPressed,
    this.width = double.infinity,
    this.height = 56.0,
    this.isLoading = false,
  });

  @override
  Widget build(BuildContext context) {
    // Determine if button is disabled strictly by onPressed being null
    // But we still want to show gradient for disabled state? Usually disabled is grey.
    // Let's stick to the design where it might just opacity down.
    final bool isDisabled = onPressed == null || isLoading;

    return Opacity(
      opacity: isDisabled ? 0.7 : 1.0,
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(height / 2),
          gradient: AppColors.btnPrimaryGradient,
          boxShadow: [
            // 0 4px 20px rgba(99, 102, 241, 0.4)
            BoxShadow(
              color: const Color(0xFF6366F1).withOpacity(0.4),
              offset: const Offset(0, 4),
              blurRadius: 20,
            ),
            // 0 0 40px rgba(139, 92, 246, 0.2)
            BoxShadow(
              color: const Color(0xFF8B5CF6).withOpacity(0.2),
              offset: const Offset(0, 0),
              blurRadius: 40,
            ),
            // inset 0 1px 0 rgba(255, 255, 255, 0.2) -> Not directly supported in simple BoxShadow
            // can use a top border or inner shadow container trick if needed.
            // For now, these outer shadows are sufficient for the "Glow".
          ],
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: isDisabled ? null : onPressed,
            borderRadius: BorderRadius.circular(height / 2),
            splashColor: Colors.white.withOpacity(0.2),
            highlightColor: Colors.white.withOpacity(0.1),
            child: Center(
              child: isLoading
                  ? const SizedBox(
                      width: 24,
                      height: 24,
                      child: CircularProgressIndicator(
                        color: Colors.white,
                        strokeWidth: 2.5,
                      ),
                    )
                  : Text(
                      text,
                      style: Theme.of(context).textTheme.labelLarge?.copyWith(
                        fontSize: 17,
                        fontWeight: FontWeight.w600,
                        shadows: [
                          const Shadow(
                            offset: Offset(0, 1),
                            blurRadius: 2,
                            color: Colors.black12,
                          ),
                        ],
                      ),
                    ),
            ),
          ),
        ),
      ),
    );
  }
}