import { css, cx } from "@emotion/css"
import { SidebarTab, tabs } from "./data"
export { Sidebar } from "./Sidebar"

export { SidebarTab }

const hidden = css`
  display: none !important;
`

export function useActiveSidebarTab(activeTab: SidebarTab | null) {
  return (
    <>
      {tabs.entries().map(([tab, { component: Component }]) => (
        <Component
          key={tab}
          className={cx(tab !== activeTab && hidden)}
          hidden={tab !== activeTab}
        />
      ))}
    </>
  )
}
