;; Cart checkout error components

(defcomp ~cart-checkout-error-filter ()
  (header :class "mb-6 sm:mb-8"
    (h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight" "Checkout error")
    (p :class "text-xs sm:text-sm text-stone-600"
      "We tried to start your payment with SumUp but hit a problem.")))

(defcomp ~cart-checkout-error-order-id (&key order-id)
  (p :class "text-xs text-rose-800/80"
    "Order ID: " (span :class "font-mono" order-id)))

(defcomp ~cart-checkout-error-content (&key error-msg order back-url)
  (div :class "max-w-full px-3 py-3 space-y-4"
    (div :class "rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2"
      (p :class "font-medium" "Something went wrong.")
      (p error-msg)
      order)
    (div (a :href back-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
      (i :class "fa fa-shopping-cart mr-2" :aria-hidden "true") "Back to cart"))))