;; Cart overview components

(defcomp ~cart-badge (&key icon text)
  (span :class "inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-stone-100"
    (i :class icon :aria-hidden "true") text))

(defcomp ~cart-badges-wrap (&key badges)
  (div :class "mt-1 flex flex-wrap gap-2 text-xs text-stone-600"
    badges))

(defcomp ~cart-group-card-img (&key src alt)
  (img :src src :alt alt :class "h-16 w-16 rounded-xl object-cover border border-stone-200 flex-shrink-0"))

(defcomp ~cart-group-card-placeholder ()
  (div :class "h-16 w-16 rounded-xl bg-stone-100 flex items-center justify-center flex-shrink-0"
    (i :class "fa fa-store text-stone-400 text-xl" :aria-hidden "true")))

(defcomp ~cart-mp-subtitle (&key title)
  (p :class "text-xs text-stone-500 truncate" title))

(defcomp ~cart-group-card (&key href img display-title subtitle badges total)
  (a :href href :class "block rounded-2xl border border-stone-200 bg-white shadow-sm hover:shadow-md hover:border-stone-300 transition p-4 sm:p-5"
    (div :class "flex items-start gap-4"
      img
      (div :class "flex-1 min-w-0"
        (h3 :class "text-base sm:text-lg font-semibold text-stone-900 truncate" display-title)
        subtitle badges)
      (div :class "text-right flex-shrink-0"
        (div :class "text-lg font-bold text-stone-900" total)
        (div :class "mt-1 text-xs text-emerald-700 font-medium" "View cart \u2192")))))

(defcomp ~cart-orphan-card (&key badges total)
  (div :class "rounded-2xl border border-dashed border-amber-300 bg-amber-50/60 p-4 sm:p-5"
    (div :class "flex items-start gap-4"
      (div :class "h-16 w-16 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0"
        (i :class "fa fa-shopping-cart text-amber-500 text-xl" :aria-hidden "true"))
      (div :class "flex-1 min-w-0"
        (h3 :class "text-base sm:text-lg font-semibold text-stone-900" "Other items")
        badges)
      (div :class "text-right flex-shrink-0"
        (div :class "text-lg font-bold text-stone-900" total)))))

(defcomp ~cart-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-6 sm:p-8 text-center"
      (div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"
        (i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))
      (p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty"))))

(defcomp ~cart-overview-panel (&key cards)
  (div :class "max-w-full px-3 py-3 space-y-3"
    (div :class "space-y-4" cards)))