UaePassButton

import SwiftUI
import EandTokens

// button-uae-pass: 48pt pill, min 48 wide, padding 12, no fill, 1pt inside stroke.
// 24pt UAE PASS logo, then the button/lg label (4 + 4 inset). lg only, no pressed state.
// Disabled: the stroke and label take the disabled tokens, the logo dims to 34%.
struct UaePassButton: View {
  var title = "Login with UAE PASS"     // or "Continue with UAE PASS"
  var disabled = false
  var action: () -> Void
  var body: some View {
    Button(action: action) {
      HStack(spacing: 0) {
        Image("uae-pass-logo")            // the third-party mark, exported from Figma 39861:22255
          .resizable().frame(width: EandIcon.xl, height: EandIcon.xl)
          .opacity(disabled ? 0.34 : 1)
        Text(title)
          .font(.system(size: EandTypography.buttonLg.size, weight: EandTypography.buttonLg.weight))
          .foregroundColor(disabled ? EandColor.buttonSecondaryTextMidnightDisabled
                                    : EandColor.buttonSecondaryTextMidnightDefault)
          .padding(.horizontal, EandSpacing.sm)
      }
      .padding(EandSpacing.md)
      .frame(minWidth: EandScale.scale48, minHeight: EandScale.scale48)
      .overlay(Capsule().strokeBorder(
        disabled ? EandColor.buttonSecondaryBorderBrandDisabled : EandColor.buttonSecondaryTextMidnightDefault,
        lineWidth: EandBorder.sm))
    }
    .disabled(disabled)
  }
}