'use client'

import { Children, isValidElement } from 'react'
import { Tab } from '@headlessui/react'
import clsx from 'clsx'
import { Fence } from '@/components/Fence'

export function CodeTabs({ children }: { children: React.ReactNode }) {
  const tabs = Children.toArray(children).filter(isValidElement) as Array<
    React.ReactElement<{ label: string; language: string; children: string }>
  >

  return (
    <Tab.Group>
      <div className="relative">
        <Tab.List className="absolute top-2 left-3 z-10 flex gap-2">
          {tabs.map((tab, index) => (
            <Tab
              key={tab.props.label ?? index}
              className={({ selected }) =>
                clsx(
                  'rounded-md px-3 py-1 text-xs font-medium backdrop-blur-sm',
                  selected
                    ? 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-white'
                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200/70 dark:bg-gray-800/40 dark:text-gray-300 dark:hover:bg-gray-700/70',
                )
              }
            >
              {tab.props.label}
            </Tab>
          ))}
        </Tab.List>
        <Tab.Panels>
          {tabs.map((tab, index) => (
            <Tab.Panel
              key={tab.props.label ?? index}
              className="focus:outline-none"
            >
              <Fence language={tab.props.language} offsetTop>
                {String(tab.props.children)}
              </Fence>
            </Tab.Panel>
          ))}
        </Tab.Panels>
      </div>
    </Tab.Group>
  )
}

export function CodeTab({
  children,
}: {
  label: string
  language: string
  children: string
}) {
  // This component is only a marker for CodeTabs to read props from.
  // It doesn't render anything by itself.
  return <>{children}</>
}
