;; Checkout error components

(defcomp ~orders-checkout-error-header ()
  (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 ~orders-checkout-error-order-id (&key oid)
  (p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" oid)))

(defcomp ~orders-checkout-error-pay-btn (&key url)
  (a :href url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
    (i :class "fa fa-credit-card mr-2" :aria-hidden "true") "Open payment page"))

(defcomp ~orders-checkout-error-content (&key 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 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"))))

(defcomp ~orders-detail-filter (&key created status list-url recheck-url csrf pay)
  (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
    (div :class "space-y-1"
      (p :class "text-xs sm:text-sm text-stone-600" "Placed " created " \u00b7 Status: " status))
    (div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"
      (a :href list-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-solid fa-list mr-2" :aria-hidden "true") "All orders")
      (form :method "post" :action recheck-url :class "inline"
        (input :type "hidden" :name "csrf_token" :value csrf)
        (button :type "submit"
          :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-solid fa-rotate mr-2" :aria-hidden "true") "Re-check status"))
      pay)))