import SwiftUI

/// Error state shown when card fetch or save fails.
struct ClipErrorView: View {
    let message: String
    let onRetry: () -> Void

    var body: some View {
        VStack(spacing: ClipDesign.Spacing.xLarge) {
            Image(systemName: "exclamationmark.triangle.fill")
                .resizable()
                .scaledToFit()
                .frame(width: ClipDesign.Size.avatar, height: ClipDesign.Size.avatar)
                .foregroundStyle(Color.Clip.error)

            VStack(spacing: ClipDesign.Spacing.small) {
                Text("Something went wrong")
                    .font(.title2)
                    .bold()
                    .foregroundStyle(Color.Clip.text)

                Text(message)
                    .font(.subheadline)
                    .foregroundStyle(Color.Clip.secondaryText)
                    .multilineTextAlignment(.center)
            }

            Button(action: onRetry) {
                Text("Try Again")
                    .font(.headline)
                    .foregroundStyle(Color.Clip.background)
                    .frame(maxWidth: .infinity)
                    .frame(height: ClipDesign.Size.buttonHeight)
                    .background(Color.Clip.accent)
                    .clipShape(.capsule)
            }
            .padding(.horizontal, ClipDesign.Spacing.xLarge)
            .padding(.top, ClipDesign.Spacing.large)
        }
        .padding(ClipDesign.Spacing.xLarge)
        .accessibilityElement(children: .combine)
        .accessibilityLabel(Text("Error: \(message)"))
    }
}

#Preview {
    ZStack {
        Color.Clip.background
            .ignoresSafeArea()
        ClipErrorView(message: "This card has expired") {
            print("Retry tapped")
        }
    }
}
