(ns auto-ap.ssr.components.tabs 
  (:require
   [auto-ap.ssr.hx :as hx]))

(defn tabs- [{:keys [tabs active]}]
  [:div.flex.flex-col.gap-2 {:x-data (hx/json {:activeTab active})}
   [:div {:class "text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700" }
    [:ul {:class "flex flex-wrap -mb-px"}
     (for [tab tabs]
       [:li {:class "me-2"}
        [:a {:href "#"
             :x-data (hx/json {:tabName (:name tab)})
             ":data-active" (format "activeTab==tabName")
             "@click" (format "activeTab=tabName" )
             :class "inline-block data-[active]:text-blue-600 data-[active]:border-blue-600 p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"} 
         (:name tab)]])
     
     
     
     #_[:li
        [:a {:class "inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"} "Disabled"]]]]
   (for [tab tabs]
     [:div {:x-data (hx/json {:tabName (:name tab)})
            :x-show (format "activeTab==tabName") 
            "x-transition:enter" "transition-opacity duration-300"
         "x-transition:enter-start" "opacity-0"
         "x-transition:enter-end" "opacity-100"}
      (:content tab) ])])