import SwiftUI
import Bedrock

struct ScannerOverlayView: View {
    var body: some View {
        GeometryReader { geometry in
            let size = min(geometry.size.width, geometry.size.height) * 0.7

            ZStack {
                Color.black.opacity(Design.Opacity.medium)

                RoundedRectangle(cornerRadius: Design.CornerRadius.large)
                    .frame(width: size, height: size)
                    .blendMode(.destinationOut)
            }
            .compositingGroup()

            RoundedRectangle(cornerRadius: Design.CornerRadius.large)
                .stroke(Color.Accent.red, lineWidth: Design.LineWidth.thick)
                .frame(width: size, height: size)
                .position(x: geometry.size.width / 2, y: geometry.size.height / 2)

            VStack {
                Spacer()

                Text("Point at a QR code")
                    .typography(.heading)
                    .foregroundStyle(Color.Text.inverted)
                    .padding(Design.Spacing.medium)
                    .background(Color.black.opacity(Design.Opacity.medium))
                    .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
                    .padding(.bottom, Design.Spacing.xxxLarge)
            }
            .frame(maxWidth: .infinity)
        }
    }
}
