import SwiftUI

// MARK: - Subscribe Button
struct SubscribeButton: View {
    let title: String
    let isLoading: Bool
    let action: () -> Void

    init(
        title: String = "Subscribe",
        isLoading: Bool,
        action: @escaping () -> Void
    ) {
        self.title = title
        self.isLoading = isLoading
        self.action = action
    }

    var body: some View {
        VStack(spacing: Theme.Spacing.xs) {
            Button(action: {
                guard !isLoading else { return }
                action()
            }) {
                HStack(spacing: Theme.Spacing.sm) {
                    if isLoading {
                        ProgressView()
                            .progressViewStyle(CircularProgressViewStyle(tint: Theme.Colors.textInverse))
                    }

                    VStack {
                        Spacer()
                        Spacer()
                        Text(title)
                            .font(Typography.font(for: .body, family: .quicksandBold))
                        Spacer()
                        // Fixed subtitle text as requested
                        Text("And get 5,000 Permanent Credits")
                        .font(Typography.font(for: .caption, family: .quicksandRegular))
                        .foregroundColor(Theme.Colors.textPrimary)
                        Spacer()
                        Spacer()
                    }
                }
                .frame(height: 56)
                .frame(maxWidth: .infinity)
                .background(Theme.Colors.primary) // primary color background
                .clipShape(Capsule())
                .shadow(
                    color: Theme.Shadows.buttonShadow.color,
                    radius: Theme.Shadows.buttonShadow.radius,
                    x: Theme.Shadows.buttonShadow.x,
                    y: Theme.Shadows.buttonShadow.y
                )
            }
            .buttonStyle(.plain)
            .disabled(isLoading)
        }
    }
}

#Preview("SubscribeButton") {
    VStack(spacing: Theme.Spacing.xl) {
        SubscribeButton(isLoading: false) {}
        SubscribeButton(isLoading: true) {}
    }
    .padding()
    .background(Theme.Colors.background)
}