SpeedSelector.swift

//
//  ContentView.swift
//  TurnBulbLight
//
//  Created by Luthfi Abdurrahim on 25/11/25.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        PlaybackSpeedSelector()
    }
}

#Preview {
    ContentView()
}

struct PlaybackSpeedSelector: View {
    @State private var isExpanded = false
    @State private var selectedSpeed = "1X"
    
    let speeds = ["8X", "4X", "2X", "1X", "0.5X"]
    
    var body: some View {
        
            
        ZStack {
            // Background (simulating store shelves)
            LinearGradient(
                gradient: Gradient(colors: [Color.orange.opacity(0.2), Color.red.opacity(0.1)]),
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()
            
            // Toggle Button (51x27)
            Button(action: {
                withAnimation(.spring(response: 0.3)) {
                    isExpanded.toggle()
                }
            }) {
                HStack(spacing: 1) {
                    Text(selectedSpeed)
                        .font(.system(size: 12, weight: .bold))
                        .foregroundColor(.white)
                        .lineLimit(1)
                        .minimumScaleFactor(0.5)
                    
                    HStack(spacing: 1) {
                        Image(systemName: "forward")
                            .font(.system(size: 9, weight: .bold))
                            .foregroundColor(.white)
                    }
                }
                .frame(width: 51, height: 27)
                .background(
                    RoundedRectangle(cornerRadius: 5)
                        .fill(Color.black.opacity(0.7))
                        .overlay(
                            RoundedRectangle(cornerRadius: 5)
                                .stroke(Color.white.opacity(0.3), lineWidth: 1)
                        )
                )
            }
            .buttonStyle(.plain)
            .scaleEffect(isExpanded ? 1.05 : 1.0)
            .overlay(alignment: .bottom) {
                if isExpanded {
                    VStack(spacing: 4) {
                        ForEach(speeds, id: \.self) { speed in
                            Button(action: {
                                selectedSpeed = speed
                                withAnimation(.spring(response: 0.3)) {
                                    isExpanded = false
                                }
                            }) {
                                Text(speed)
                                    .font(.system(size: 12, weight: .semibold))
                                    .foregroundColor(.white)
                                    .lineLimit(1)
                                    .minimumScaleFactor(1)
                                    .frame(width: 51, height: 25)
                                    .background(
                                        RoundedRectangle(cornerRadius: 4)
                                            .fill(selectedSpeed == speed ? Color.white.opacity(0.15) : Color.clear)
                                    )
                            }
                            .buttonStyle(.plain)
                        }
                    }
                    .padding(.vertical, 4)
                    .padding(.horizontal, 2)
                    .frame(width: 51)
                    .background(
                        RoundedRectangle(cornerRadius: 5)
                            .fill(Color.black.opacity(0.7))
                            .overlay(
                                RoundedRectangle(cornerRadius: 5)
                                    .stroke(Color.white.opacity(0.3), lineWidth: 1)
                            )
                    )
                    .transition(.scale.combined(with: .opacity))
                    .padding(.bottom, 35)
                }
            }
        }
    
    }
}