supabase/apps/www/components/Tabs/Tabs.tsx

'use client'

import { useEffect, useState } from 'react'
import { cn, TabsContent, TabsList, TabsTrigger, Tabs as UITabs } from 'ui'

export interface TabsProps {
  children: React.ReactNode
  className?: string
  defaultActiveId?: string
  listClassNames?: string
}

export interface TabPanelProps {
  children: React.ReactNode
  id: string
  label: string
  className?: string
}

function Tabs({ children, className, defaultActiveId, listClassNames }: TabsProps) {
  const [mounted, setMounted] = useState(false)
  const [activeTab, setActiveTab] = useState(defaultActiveId)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  // Extract tab panels from children
  const tabPanels = Array.isArray(children) ? children : [children]
  const validTabPanels = tabPanels.filter(
    (child) => child && typeof child === 'object' && 'props' in child && child.props.id
  )

  if (validTabPanels.length === 0) return null

  const currentActiveTab = activeTab || validTabPanels[0]?.props?.id

  return (
    <div className={cn('not-prose', className)}>
      <UITabs
        value={currentActiveTab}
        onValueChange={setActiveTab}
        className="w-full flex flex-col gap-4 [&_.ch-codeblock]:mt-0!"
      >
        <TabsList className={cn('shiki-wrapper flex', listClassNames)}>
          {validTabPanels.map((panel) => (
            <TabsTrigger key={panel.props.id} value={panel.props.id} className="text-xs px-2.5">
              {panel.props.label}
            </TabsTrigger>
          ))}
        </TabsList>
        {validTabPanels.map((panel) => (
          <TabsContent key={panel.props.id} value={panel.props.id} className="mt-0">
            {panel.props.children}
          </TabsContent>
        ))}
      </UITabs>
    </div>
  )
}

function TabPanel({ children, id, label, className }: TabPanelProps) {
  return (
    <div className={cn('tab-panel', className)} data-id={id} data-label={label}>
      {children}
    </div>
  )
}

export { Tabs, TabPanel }
export default Tabs