import SwiftUI

struct RippleAudioShelf: View {
    private let accent = Color.yellow
    private let tracks = ["Golden Hour", "Night Shift", "Blue Line"]

    var body: some View {
        VStack(alignment: .leading, spacing: 18) {
            HStack(spacing: 18) {
                RoundedRectangle(cornerRadius: 30, style: .continuous)
                    .fill(
                        LinearGradient(
                            colors: [accent.opacity(0.28), .white],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 180, height: 180)

                VStack(alignment: .leading, spacing: 10) {
                    Text("Ripple Audio Shelf")
                        .font(.system(size: 30, weight: .bold, design: .rounded))
                    Text("Curate a bright album shelf with compact controls and a simple track list.")
                        .foregroundStyle(.secondary)

                    HStack(spacing: 10) {
                        ForEach(["backward.fill", "play.fill", "forward.fill"], id: \.self) { icon in
                            Circle()
                                .fill(icon == "play.fill" ? accent : accent.opacity(0.14))
                                .frame(width: 42, height: 42)
                                .overlay {
                                    Image(systemName: icon)
                                        .foregroundStyle(icon == "play.fill" ? .white : accent)
                                }
                        }
                    }
                }
            }

            VStack(spacing: 12) {
                ForEach(tracks, id: \.self) { track in
                    HStack {
                        Text(track)
                            .font(.headline)
                        Spacer()
                        Text("3:42")
                            .foregroundStyle(.secondary)
                    }
                    .padding(14)
                    .background(Color.white, in: RoundedRectangle(cornerRadius: 20, style: .continuous))
                }
            }
        }
        .padding(24)
        .background(Color(.systemGroupedBackground))
    }
}