import ComponentLibrary
import ComposableArchitecture
import Foundation
import Localization
import SwiftUI

struct EmptyPlayerView: View {
    let store: StoreOf<RootCoordinatorV1>
    let namespace: Namespace.ID

    var body: some View {
        // TODO: use AuraButton like in other views
        Button {
            UIImpactFeedbackGenerator(style: .light).impactOccurred()
            store.send(.createTapped)
        } label: {
            HStack(spacing: 8) {
                Image.Icon.create
                    .foregroundColor(.SemanticV1.iconPrimary)
                    .matchedGeometryEffect(id: "create-icon", in: namespace)

                Text(L10n.FeatureRoot.create)
                    .typographyV1(.headline6)
                    .foregroundColor(.SemanticV1.textPrimary)
            }
            .frame(height: 64)
            .environment(\.colorScheme, .dark)
            .frame(maxWidth: .infinity)
            .background(
                ButtonAuraBackground(
                    style: store.selectedSunoModel.marketingLevelUnderstanding == .v4 ? .blue : .orangeAura,
                    withGradientOverlay: true
                )
                .clipShape(Capsule())
            )
            .safePadding()
        }
        .buttonStyle(ScaleButtonStyle(scaleAmount: 0.98, minimumOpacity: 0.8))
        .padding(.horizontal, 12)
        .background(Color.SemanticV1.backgroundPrimary.ignoresSafeArea())
        .overlay(alignment: .top) {
            LinearGradient(
                colors: [
                    .SemanticV1.backgroundPrimary.opacity(0),
                    .SemanticV1.backgroundPrimary,
                ],
                startPoint: .top,
                endPoint: .bottom
            )
            .frame(height: 20)
            .offset(y: -20)
        }
    }
}