(defcomp
  (&key
    (title :as string)
    (direction :as string)
    (description :as string)
    (example-code :as string?)
    demo)
  (~docs/page
    :title title
    (let
      ((badge-class (if (= direction "request") "bg-blue-100 text-blue-700" (if (= direction "response") "bg-emerald-100 text-emerald-700" "bg-amber-100 text-amber-700")))
        (badge-label
          (if
            (= direction "request")
            "Request Header"
            (if
              (= direction "response")
              "Response Header"
              "Request & Response"))))
      (div
        (~tw :tokens "flex items-center gap-3 mb-4")
        (span
          :class (str "text-xs font-medium px-2 py-1 rounded " badge-class)
          badge-label)))
    (p (~tw :tokens "text-stone-600 mb-6") description)
    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
    (when
      example-code
      (<>
        (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-6") "Example usage")
        (~examples/source :src-code (highlight example-code "lisp"))))))
