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

class HoverableButton extends StatefulWidget {
  final String iconPath;
  final String text;
  final VoidCallback onTap;

  const HoverableButton({
    Key? key,
    required this.iconPath,
    required this.text,
    required this.onTap,
  }) : super(key: key);

  @override
  State<HoverableButton> createState() => _HoverableButtonState();
}

class _HoverableButtonState extends State<HoverableButton> {
  bool isHovered = false;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final screenWidth = MediaQuery.of(context).size.width;

    return GestureDetector(
      onTap: widget.onTap,
      child: MouseRegion(
          onEnter: (_) => _updateHoverState(true),
          onExit: (_) => _updateHoverState(false),
          child: SizedBox(
            width: screenWidth * .07,
            child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 8),
                decoration: BoxDecoration(
                  color: isHovered ? ColorsManager.warningRed : ColorsManager.whiteColors,
                  borderRadius: BorderRadius.circular(16),
                  boxShadow: [
                    if (isHovered)
                      BoxShadow(
                        color: ColorsManager.warningRed.withOpacity(0.4),
                        blurRadius: 8,
                        offset: const Offset(0, 4),
                      ),
                  ],
                ),
                child: Center(
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      _buildIcon(),
                      if (!isHovered) const SizedBox(width: 8),
                      if (!isHovered) _buildText(theme),
                    ],
                  ),
                )),
          )),
    );
  }

  Widget _buildIcon() {
    return isHovered
        ? const Icon(
            Icons.close,
            color: ColorsManager.whiteColors,
            size: 24,
          )
        : SvgPicture.asset(
            widget.iconPath,
            width: 24,
            height: 24,
          );
  }

  Widget _buildText(ThemeData theme) {
    return Text(
      widget.text,
      style: theme.textTheme.bodyLarge?.copyWith(
        color: ColorsManager.spaceColor,
        fontWeight: FontWeight.w500,
      ),
    );
  }

  void _updateHoverState(bool hover) {
    setState(() => isHovered = hover);
  }
}