import 'package:flutter/material.dart';
import '../models/song.dart';
import '../utils/farb_theme.dart';

/// Zeigt die letzten abgespielten Songs als horizontale Liste.
/// Manuell in home_screen.dart einbaubar:
///   RecentWidget(songs: _vm.letzteSongs, onPlay: _vm.spieleSong)
class RecentWidget extends StatelessWidget {
  final List<Song> songs;
  final void Function(Song) onPlay;

  const RecentWidget({super.key, required this.songs, required this.onPlay});

  @override
  Widget build(BuildContext context) {
    if (songs.isEmpty) return const SizedBox.shrink();

    return Padding(
      padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('🕐 Zuletzt gehört',
            style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.white70)),
          const SizedBox(height: 8),
          SizedBox(
            height: 52,
            child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemCount: songs.length,
              separatorBuilder: (_, __) => const SizedBox(width: 8),
              itemBuilder: (_, i) => GestureDetector(
                onTap: () => onPlay(songs[i]),
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                    color: MeloTheme.dunkel1,
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: MeloTheme.dunkel2),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        width: 28, height: 28,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: MeloTheme.rot.withValues(alpha: 0.3),
                        ),
                        child: const Center(child: Text('♪', style: TextStyle(fontSize: 12))),
                      ),
                      const SizedBox(width: 6),
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(songs[i].titel,
                            style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w500, color: Colors.white)),
                          Text(songs[i].kuenstler,
                            style: const TextStyle(fontSize: 9, color: MeloTheme.textSekundaer)),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}