import 'package:flutter/material.dart';

/// [FriendCard] est un widget représentant une carte d'ami.
/// Cette carte inclut l'image de l'ami, son nom, et un bouton qui permet
/// d'interagir avec cette carte (via le `onTap`).
///
/// Ce widget est conçu pour être utilisé dans des listes d'amis, comme
/// dans la section "Mes Amis" de l'application.
class FriendCard extends StatelessWidget {
  final String name; // Le nom de l'ami
  final String imageUrl; // URL de l'image de profil de l'ami
  final VoidCallback onTap; // Fonction callback exécutée lors d'un clic sur la carte

  /// Constructeur de [FriendCard] avec des paramètres obligatoires.
  const FriendCard({
    Key? key,
    required this.name,
    required this.imageUrl,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // Lorsque l'utilisateur clique sur la carte, on déclenche la fonction onTap.
        debugPrint("[LOG] Carte de l'ami $name cliquée.");
        onTap(); // Exécuter le callback fourni
      },
      child: Card(
        elevation: 4, // Élévation de la carte pour donner un effet d'ombre
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)), // Bordure arrondie
        color: Colors.grey.shade800, // Couleur de fond de la carte
        child: Padding(
          padding: const EdgeInsets.all(12.0), // Padding interne pour espacer le contenu
          child: Row(
            children: [
              // Image de profil de l'ami affichée sous forme de cercle
              Hero(
                tag: name, // Le tag Hero permet de créer une transition animée vers un autre écran.
                child: CircleAvatar(
                  backgroundImage: NetworkImage(imageUrl), // Charger l'image depuis l'URL
                  radius: 30, // Taille de l'avatar
                ),
              ),
              const SizedBox(width: 16), // Espacement entre l'image et le nom
              // Le nom de l'ami avec un texte en gras et blanc
              Expanded(
                child: Text(
                  name,
                  style: const TextStyle(
                    fontSize: 18, // Taille de la police
                    color: Colors.white, // Couleur du texte
                    fontWeight: FontWeight.bold, // Style en gras
                  ),
                ),
              ),
              // Icône de flèche indiquant que la carte est cliquable
              Icon(Icons.chevron_right, color: Colors.white70),
            ],
          ),
        ),
      ),
    );
  }
}