;; Cart payments components

(defcomp ~cart-payments-panel (&key update-url csrf merchant-code placeholder input-cls sumup-configured checkout-prefix)
  (section :class "p-4 max-w-lg mx-auto"
    (div :id "payments-panel" :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"
      (h3 :class "text-lg font-semibold text-stone-800"
        (i :class "fa fa-credit-card text-purple-600 mr-1") " SumUp Payment")
      (p :class "text-xs text-stone-400" "Configure per-page SumUp credentials. Leave blank to use the global merchant account.")
      (form :sx-put update-url :sx-target "#payments-panel" :sx-swap "outerHTML" :sx-select "#payments-panel" :class "space-y-3"
        (input :type "hidden" :name "csrf_token" :value csrf)
        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Merchant Code")
          (input :type "text" :name "merchant_code" :value merchant-code :placeholder "e.g. ME4J6100" :class input-cls))
        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "API Key")
          (input :type "password" :name "api_key" :value "" :placeholder placeholder :class input-cls)
          (when sumup-configured (p :class "text-xs text-stone-400 mt-0.5" "Key is set. Leave blank to keep current key.")))
        (div (label :class "block text-xs font-medium text-stone-600 mb-1" "Checkout Reference Prefix")
          (input :type "text" :name "checkout_prefix" :value checkout-prefix :placeholder "e.g. ROSE-" :class input-cls))
        (button :type "submit" :class "px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500"
          "Save SumUp Settings")
        (when sumup-configured (span :class "ml-2 text-xs text-green-600"
          (i :class "fa fa-check-circle") " Connected"))))))