Music Player

import SwiftUI

struct MusicPlayerTemplate: View {
    @State private var songProgress: Double = 0.35
    @State private var volume: Double = 0.7
    var body: some View {
        NavigationView {
            ZStack {
                LinearGradient(gradient: Gradient(colors: [Color.purple.opacity(0.18), Color.blue.opacity(0.18)]), startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
                VStack(spacing: 32) {
                    Spacer()
                    // Album Art
                    ZStack {
                        RoundedRectangle(cornerRadius: 28, style: .continuous)
                            .fill(LinearGradient(gradient: Gradient(colors: [Color.purple.opacity(0.5), Color.blue.opacity(0.4)]), startPoint: .topLeading, endPoint: .bottomTrailing))
                            .shadow(color: Color.black.opacity(0.10), radius: 16, x: 0, y: 8)
                        Image(systemName: "music.note.list")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 80, height: 80)
                            .foregroundColor(.white.opacity(0.8))
                    }
                    .frame(width: 260, height: 260)
                    .padding(.top, 32)

                    // Song Info
                    VStack(spacing: 4) {
                        Text("Dreams")
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(.primary)
                        Text("Fleetwood Mac")
                            .font(.headline)
                            .foregroundColor(.secondary)
                    }

                    // Progress Slider
                    VStack(spacing: 0) {
                        Slider(value: $songProgress, in: 0...1)
                        HStack {
                            Text("1:12")
                                .font(.caption)
                                .foregroundColor(.secondary)
                            Spacer()
                            Text("3:45")
                                .font(.caption)
                                .foregroundColor(.secondary)
                        }
                    }
                    .padding(.horizontal)

                    // Playback Controls
                    HStack(spacing: 48) {
                        Button(action: {}) {
                            Image(systemName: "backward.fill")
                                .font(.system(size: 32))
                                .foregroundColor(.primary)
                        }
                        Button(action: {}) {
                            ZStack {
                                Circle()
                                    .fill(Color.blue)
                                    .frame(width: 64, height: 64)
                                Image(systemName: "play.fill")
                                    .font(.system(size: 32))
                                    .foregroundColor(.white)
                            }
                        }
                        Button(action: {}) {
                            Image(systemName: "forward.fill")
                                .font(.system(size: 32))
                                .foregroundColor(.primary)
                        }
                    }

                    // Volume Control
                    VStack(spacing: 8) {
                        HStack {
                            Image(systemName: "speaker.fill")
                                .foregroundColor(.secondary)
                            Slider(value: $volume, in: 0...1)
                            Image(systemName: "speaker.wave.3.fill")
                                .foregroundColor(.secondary)
                        }
                    }
                    .padding(.horizontal)

                    Spacer()
                }
            }
            .navigationTitle("Now Playing")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}