;; Account dashboard components

(defcomp ~account-error-banner (&key error)
  (when error
    (div :class "rounded-lg border border-red-200 bg-red-50 text-red-800 px-4 py-3 text-sm"
      error)))

(defcomp ~account-user-email (&key email)
  (when email
    (p :class "text-sm text-stone-500 mt-1" email)))

(defcomp ~account-user-name (&key name)
  (when name
    (p :class "text-sm text-stone-600" name)))

(defcomp ~account-logout-form (&key csrf-token)
  (form :action "/auth/logout/" :method "post"
    (input :type "hidden" :name "csrf_token" :value csrf-token)
    (button :type "submit"
      :class "inline-flex items-center gap-2 rounded-full border border-stone-300 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-50 transition"
      (i :class "fa-solid fa-right-from-bracket text-xs") " Sign out")))

(defcomp ~account-label-item (&key name)
  (span :class "inline-flex items-center rounded-full border border-stone-200 px-3 py-1 text-xs font-medium bg-white/60"
    name))

(defcomp ~account-labels-section (&key items)
  (when items
    (div
      (h2 :class "text-base font-semibold tracking-tight mb-3" "Labels")
      (div :class "flex flex-wrap gap-2" items))))

(defcomp ~account-main-panel (&key error email name logout labels)
  (div :class "w-full max-w-3xl mx-auto px-4 py-6"
    (div :class "bg-white/70 backdrop-blur rounded-2xl shadow border border-stone-200 p-6 sm:p-8 space-y-8"
      error
      (div :class "flex items-center justify-between"
        (div
          (h1 :class "text-xl font-semibold tracking-tight" "Account")
          email
          name)
        logout)
      labels)))
