import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import '../../../../domain/entities/track.dart'; import '../../../../core/theme/colors.dart'; import '../common/cached_network_image_with_fallback.dart'; /// Search result card for a track with hover state and click cursor class SearchTrackCard extends StatefulWidget { final Track track; final VoidCallback? onTap; const SearchTrackCard({ required this.track, this.onTap, super.key, }); @override State createState() => _SearchTrackCardState(); } class _SearchTrackCardState extends State { bool _isHovered = false; @override Widget build(BuildContext context) { return MouseRegion( onEnter: (_) => setState(() => _isHovered = true), onExit: (_) => setState(() => _isHovered = false), cursor: SystemMouseCursors.click, child: GestureDetector( onTap: widget.onTap, child: AnimatedContainer( duration: const Duration(milliseconds: 200), decoration: BoxDecoration( gradient: AppColors.primaryGradient, borderRadius: BorderRadius.circular(12), border: Border.all( color: _isHovered ? AppColors.cyan : AppColors.cyan.withOpacity(0.3), width: _isHovered ? 2 : 1, ), boxShadow: _isHovered ? [ BoxShadow( color: AppColors.cyan.withOpacity(0.3), blurRadius: 20, offset: const Offset(0, 4), ), ] : null, ), child: Padding( padding: const EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ // Thumbnail or icon Expanded( child: ClipRRect( borderRadius: BorderRadius.circular(8), child: SizedBox( width: double.infinity, child: CachedNetworkImageWithFallback( imageUrl: widget.track.imageUrl, fallbackIcon: Icons.music_note, progressColor: AppColors.cyan, fit: BoxFit.cover, ), ), ), ), const SizedBox(height: 12), // Track info Text( widget.track.title, style: const TextStyle( color: AppColors.onBackground, fontWeight: FontWeight.w600, fontSize: 16, ), maxLines: 2, overflow: TextOverflow.ellipsis, ), const SizedBox(height: 4), Text( widget.track.artist?.name ?? 'Unknown Artist', style: const TextStyle( color: AppColors.onBackground, fontSize: 14, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), ), ), ); } }