import SwiftUI

struct MusicPlayerView: View {
    @State private var playing = true
    @State private var liked = false

    var body: some View {
        ZStack {
            Color(red: 0.05, green: 0.03, blue: 0.08).ignoresSafeArea()
            VStack(spacing: 0) {
                VStack(spacing: 4) {
                    Text("PLAYING FROM").font(.caption).bold().foregroundColor(Color(red: 0.6, green: 0.5, blue: 0.79))
                    Text("Late Night Drive").fontWeight(.semibold).foregroundColor(.white)
                }.padding(.top, 24)

                RoundedRectangle(cornerRadius: 28)
                    .fill(Color(red: 0.11, green: 0.07, blue: 0.19))
                    .frame(width: 300, height: 300)
                    .overlay(Image(systemName: "moon.stars.fill").font(.system(size: 90)).foregroundColor(.white.opacity(0.85)))
                    .padding(.top, 34)

                HStack {
                    VStack(alignment: .leading) {
                        Text("Midnight City").font(.system(size: 26, weight: .heavy)).foregroundColor(.white)
                        Text("Neon Coast").font(.title3).foregroundColor(Color(red: 0.6, green: 0.5, blue: 0.79))
                    }
                    Spacer()
                    Button { liked.toggle() } label: {
                        Image(systemName: liked ? "heart.fill" : "heart").foregroundColor(.white).font(.title2)
                    }
                }.padding(.horizontal, 30).padding(.top, 40)

                ProgressView(value: 0.43)
                    .tint(Color(red: 0.66, green: 0.33, blue: 0.97))
                    .padding(.horizontal, 30).padding(.top, 24)

                HStack(spacing: 36) {
                    Image(systemName: "backward.fill")
                    Button { playing.toggle() } label: {
                        Image(systemName: playing ? "pause.circle.fill" : "play.circle.fill")
                            .font(.system(size: 72)).foregroundColor(Color(red: 0.66, green: 0.33, blue: 0.97))
                    }
                    Image(systemName: "forward.fill")
                }
                .font(.title).foregroundColor(.white).padding(.top, 30)
                Spacer()
            }
        }
    }
}

#Preview { MusicPlayerView() }