import SwiftUI

/// A compact view showing the currently referenced song with artwork and play/pause controls
struct ReferencedSong: View {
    let songTitle: String
    let artworkGradient: LinearGradient
    let isPlaying: Bool
    let onPlayPause: () -> Void
    let onClose: () -> Void

    var body: some View {
        VStack{
            HStack(spacing: 8) {
                // Mini artwork with play/pause
                Button(action: onPlayPause) {
                    ZStack {
                        ArtworkShader(gradient: artworkGradient, isAlive: isPlaying)
                            .frame(width: 28, height: 28)
                            .cornerRadius(8)
                        
                        // Play/Pause icon overlay
                        Image(isPlaying ? "Icon/pause" : "Icon/play")
                            .resizable()
                            .frame(width: 16, height: 16)
                            .foregroundColor(.white)
                    }
                }
                .buttonStyle(PlainButtonStyle())
                
                // Song title
                Text(songTitle.uppercased())
                    .font(Constants.Typography.timecode)
                    .kerning(0.2)
                    .foregroundColor(Constants.Colors.Foreground.primary)
                    .lineLimit(1)
                
                Spacer()
                
                // Close button
                Button(action: onClose) {
                    Image("Icon/close")
                        .resizable()
                        .renderingMode(.template)
                        .frame(width: 16, height: 16)
                        .foregroundColor(Constants.Colors.Foreground.tertiary)
                }
                .buttonStyle(PlainButtonStyle())
            }
            .padding(.leading, 8)
            .padding(.trailing, 12)
            .padding(.vertical, 8)
            .background(Constants.Colors.Background.Fog.thin)
            .cornerRadius(12)
        }
        .padding(.horizontal, 16)
    }
}

#Preview {
    VStack {
        ReferencedSong(
            songTitle: "Song Title (#1)",
            artworkGradient: LinearGradient(
                colors: [Color.blue, Color.purple],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            ),
            isPlaying: true,
            onPlayPause: { print("Play/Pause tapped") },
            onClose: { print("Close tapped") }
        )

        Spacer()
    }
    .background(Constants.Colors.Background.primary)
}