;; Market grid and layout components

(defcomp ~market-markets-grid (&key cards)
  (div :class "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" cards))

(defcomp ~market-no-markets (&key message)
  (div :class "px-3 py-12 text-center text-stone-400"
    (i :class "fa fa-store text-4xl mb-3" :aria-hidden "true")
    (p :class "text-lg" message)))

(defcomp ~market-product-grid (&key cards)
  (<> (div :class "grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-3" cards) (div :class "pb-8")))

(defcomp ~market-bottom-spacer ()
  (div :class "pb-8"))

(defcomp ~market-like-toggle-button (&key colour action hx-headers label icon-cls)
  (button :class (str "flex items-center gap-1 " colour " hover:text-red-600 transition-colors w-[1em] h-[1em]")
          :sx-post action :sx-target "this" :sx-swap "outerHTML" :sx-push-url "false"
          :sx-headers hx-headers
          :sx-swap-settle "0ms" :aria-label label
    (i :aria-hidden "true" :class icon-cls)))