petitspas/frontend/lib/widgets/image_button.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class ImageButton extends StatelessWidget {
  final String bg;
  final double width;
  final double height;
  final String text;
  final Color textColor;
  final VoidCallback onPressed;
  final double fontSize; // Ajout pour la flexibilité

  /// Forme utilisée pour le focus / hover / splash. Les fonds « dessinés »
  /// sont des pastilles : le stadium suit leur contour au lieu d'un rectangle.
  final OutlinedBorder shape;

  /// Opacité du fond seul (le texte reste net) : permet un état « inactif »
  /// plus clair sans changer d'asset.
  final double bgOpacity;

  const ImageButton({
    super.key,
    required this.bg,
    required this.width,
    required this.height,
    required this.text,
    required this.textColor,
    required this.onPressed,
    this.fontSize = 16, // Valeur par défaut
    this.shape = const StadiumBorder(),
    this.bgOpacity = 1.0,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: Semantics(
        button: true,
        label: text,
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: TextButton(
            onPressed: onPressed,
            style: TextButton.styleFrom(
              padding: EdgeInsets.zero,
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              shape: shape,
            ),
            child: Ink(
              // Pas de découpe du PNG : le trait « dessiné » déborde un peu du
              // stadium, on ne rogne que le focus / hover / splash.
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(bg),
                  fit: BoxFit.fill,
                  opacity: bgOpacity,
                ),
              ),
              child: Center(
                child: Text(
                  text,
                  style: GoogleFonts.merienda(
                    color: textColor,
                    fontSize: fontSize, // Utilisation du paramètre
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}