syncrow-web/lib/pages/spaces_management/widgets/hoverable_button.dart

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
  _HoverableButtonState createState() => _HoverableButtonState();
}

class _HoverableButtonState extends State<HoverableButton> {
  bool isHovered = false; // Track hover state

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: MouseRegion(
        onEnter: (_) => setState(() => isHovered = true),
        onExit: (_) => setState(() => isHovered = false),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 200),
          padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 8),
          decoration: BoxDecoration(
            color: isHovered ? ColorsManager.warningRed : Colors.white, // Change color on hover
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              if (isHovered)
                BoxShadow(
                  color: ColorsManager.warningRed,
                ),
            ],
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              if (!isHovered)
                SvgPicture.asset(
                  widget.iconPath,
                  width: 24,
                  height: 24,
                )
              else
                Center(
                    child: const Icon(
                  Icons.close, // Display "X" on hover
                  color: Colors.white,
                  size: 24,
                )),
              const SizedBox(width: 8),
              if (!isHovered) ...[
                Text(
                  widget.text,
                  style: TextStyle(
                    fontSize: 17,
                    fontWeight: FontWeight.w500,
                    color: ColorsManager.spaceColor,
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}