;; Cart orders list components

(defcomp ~cart-order-row-desktop (&key order-id created desc total pill status detail-url)
  (tr :class "hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60"
    (td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" order-id))
    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" created)
    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" desc)
    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" total)
    (td :class "px-3 py-2 align-top" (span :class pill status))
    (td :class "px-3 py-0.5 align-top text-right"
      (a :href detail-url :class "inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition" "View"))))

(defcomp ~cart-order-row-mobile (&key order-id pill status created total detail-url)
  (tr :class "sm:hidden border-t border-stone-100"
    (td :colspan "5" :class "px-3 py-3"
      (div :class "flex flex-col gap-2 text-xs"
        (div :class "flex items-center justify-between gap-2"
          (span :class "font-mono text-[11px] text-stone-700" order-id)
          (span :class pill status))
        (div :class "text-[11px] text-stone-500 break-words" created)
        (div :class "flex items-center justify-between gap-2"
          (div :class "font-medium text-stone-800" total)
          (a :href detail-url :class "inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0" "View"))))))

(defcomp ~cart-orders-end ()
  (tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400" "End of results")))

(defcomp ~cart-orders-empty ()
  (div :class "max-w-full px-3 py-3 space-y-3"
    (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700"
      "No orders yet.")))

(defcomp ~cart-orders-table (&key rows)
  (div :class "max-w-full px-3 py-3 space-y-3"
    (div :class "overflow-x-auto rounded-2xl border border-stone-200 bg-white/80"
      (table :class "min-w-full text-xs sm:text-sm"
        (thead :class "bg-stone-50 border-b border-stone-200 text-stone-600"
          (tr
            (th :class "px-3 py-2 text-left font-medium" "Order")
            (th :class "px-3 py-2 text-left font-medium" "Created")
            (th :class "px-3 py-2 text-left font-medium" "Description")
            (th :class "px-3 py-2 text-left font-medium" "Total")
            (th :class "px-3 py-2 text-left font-medium" "Status")
            (th :class "px-3 py-2 text-left font-medium")))
        (tbody rows)))))

(defcomp ~cart-orders-filter (&key search-mobile)
  (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" "Recent orders placed via the checkout."))
    (div :class "md:hidden" search-mobile)))