'use client' // We split out this since we only need this to be client side.

const styles = {
  input:
    'sr-only [&:checked+label]:[--highlight:1] [&:checked+label]:bg-zinc-900 [&:not(:checked)+label:hover]:bg-[hsl(0,0%,20%)] [&:not(:checked)+label:hover]:[--highlight:0.35]',
  label:
    'grid cursor-pointer place-items-center transition-all whitespace-nowrap text-ellipsis duration-300 select-none ease-in-out h-9 rounded-md px-[clamp(0.5rem,2vw+0.25rem,2rem)] text-center text-[hsla(0,0%,100%,calc(.7+var(--highlight,0)))]'
}

export type TabTriggerProps = {
  children?: React.ReactNode
  index?: number
  id?: string
}

const TabTrigger: React.FC<TabTriggerProps> = ({ children, index = 0, id }) => (
  <>
    <input
      type="radio"
      id={`${id}-${index}`}
      name={id}
      className={styles.input}
      defaultChecked={index === 0}
      onChange={(e) => {
        const tabsContainer = e.currentTarget.closest('.tabs') as HTMLElement

        if (tabsContainer) {
          tabsContainer.style.setProperty('--active', index.toString())

          // Find the next tab panel and the currently active tab panel
          const nextTab = tabsContainer.querySelector(`.tab-content > :nth-child(${index + 1})`) as HTMLElement
          const currentTab = tabsContainer.querySelector(`.tab-content > .active`) as HTMLElement

          // Get the scrollHeight of the content within the current and next tabs
          const currentTabHeight = currentTab?.querySelector('.height-div')?.scrollHeight
          const nextTabHeight = nextTab?.querySelector('.height-div')?.scrollHeight

          // Conditionally set min-height for a smooth transition (This prevents jumping content when switching tabs)
          if (currentTabHeight && nextTabHeight) {
            if (nextTabHeight > currentTabHeight) {
              // If next tab's content is taller, set the min-height of the current tab to its own height
              currentTab.style.setProperty('min-height', `${currentTabHeight}px`)
            } else if (nextTabHeight < currentTabHeight) {
              // If next tab's content is shorter, adjust both to ensure smooth transition
              nextTab.style.setProperty('min-height', `${nextTabHeight}px`)
              currentTab.style.setProperty('min-height', `${nextTabHeight}px`)
            } else {
              // If the content heights are the same, ensure both maintain this height
              nextTab.style.setProperty('min-height', `${nextTabHeight}px`)
              currentTab.style.setProperty('min-height', `${currentTabHeight}px`)
            }
          }

          // Adjust the delay here as needed, previously mentioned to be 1 second, but code shows a delay of 1 millisecond
          setTimeout(() => {
            nextTab.classList.add('active')
            currentTab.classList.remove('active')

            // Remove 'active' class from all other tabs except the next tab
            tabsContainer.querySelectorAll(`.tab-content > :not(:nth-child(${index + 1}))`).forEach((el) => {
              el.classList.remove('active')
            })
          }, 1) // Ensure this delay is set according to your needs, may adjust to 1000 for 1 second if that was the intent
        }
      }}
    />
    <label htmlFor={`${id}-${index}`} className={styles.label}>
      {children}
    </label>
  </>
)

export default TabTrigger

import React from 'react'

export const isComponentMatching = (child: React.ReactNode, targetType: any): boolean => {
  if (!React.isValidElement(child)) return false
  if (React.isValidElement(child) && child.type === targetType) {
    return true
  }

  let displayName = undefined
  if (typeof window === 'undefined') {
    // @ts-ignore
    displayName = Array.isArray(child?.type?._payload?.value) ? child.type?._payload?.value?.at(-1) : child.type?._payload?.value?.displayName
  } else {
    // @ts-ignore
    displayName = Array.isArray(child?.type?._payload?.value)
      ? // @ts-ignore
        child.type?._payload?.value?.at(-1)
      : // @ts-ignore
        child?.type?._payload?.value?.name || child?.type?._payload?.value?.displayName
  }

  return [targetType.name, targetType.displayName].includes(displayName)
}

export function findComponentsOfType(children: React.ReactNode, componentType: React.ElementType): React.ReactElement<any, any>[] {
  const foundComponents = React.Children.toArray(children).filter((child) => React.isValidElement(child) && isComponentMatching(child, componentType))

  // Cast each found child as React.ReactElement since we've already verified they are valid elements.
  return foundComponents as React.ReactElement<any, any>[]
}

export function findComponentOfType(children: React.ReactNode, componentType: React.ElementType): React.ReactElement | undefined {
  const found = React.Children.toArray(children).find((child) => React.isValidElement(child) && isComponentMatching(child, componentType))

  return found as React.ReactElement<any, any> | undefined
}

export function applyPropsToChildrenOfType(
  children: React.ReactNode,
  extraProps: any,
  componentType: React.ElementType | React.ElementType[],
  options: {
    includeIndex?: boolean
    recursive?: boolean
  } = {}
): React.ReactNode {
  const { includeIndex = false, recursive = false } = options

  return React.Children.map(children, (child, index) => {
    if (!React.isValidElement(child)) {
      return child
    }

    const isEligibleComponent = Array.isArray(componentType) ? componentType.some((type) => isComponentMatching(child, type)) : isComponentMatching(child, componentType)

    const props = isEligibleComponent ? { ...extraProps, ...(includeIndex ? { index } : {}) } : {}

    if (!(child.props && child.props.children) || !recursive) {
      return React.cloneElement(child, props)
    }

    const childProps = {
      ...child.props,
      ...props,
      children: applyPropsToChildrenOfType(child.props.children, extraProps, componentType, options)
    }
    return React.cloneElement(child, childProps)
  })
}