import { useRef, useState, useLayoutEffect } from 'react'
import type { IconComponent } from '../shared/Icons'

export interface Tab<T extends string = string> {
  value: T
  label: string
  Icon?: IconComponent
}

interface TabsProps<T extends string = string> {
  value: T
  onChange: (value: T) => void
  tabs: Tab<T>[]
  className?: string
}

export function Tabs<T extends string = string>({
  value,
  onChange,
  tabs,
  className = '',
}: TabsProps<T>) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })

  useLayoutEffect(() => {
    const container = containerRef.current
    if (!container) return

    const activeIndex = tabs.findIndex(tab => tab.value === value)
    const buttons = container.querySelectorAll('button')
    const activeButton = buttons[activeIndex]

    if (activeButton) {
      setIndicatorStyle({
        left: activeButton.offsetLeft,
        width: activeButton.offsetWidth,
      })
    }
  }, [value, tabs])

  return (
    <div
      ref={containerRef}
      className={`relative flex bg-border/50 border border-border ${className}`}
    >
      <div
        className="absolute inset-y-0 bg-surface border-x border-border/50 transition-all duration-200 ease-out"
        style={{
          left: indicatorStyle.left,
          width: indicatorStyle.width,
        }}
      />
      {tabs.map((tab) => {
        const isActive = tab.value === value
        return (
          <button
            key={tab.value}
            type="button"
            onClick={() => onChange(tab.value)}
            className={`relative z-10 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 ${
              isActive
                ? 'text-text'
                : 'text-muted hover:text-text/70'
            }`}
          >
            {tab.Icon && <tab.Icon className="w-3.5 h-3.5" />}
            <span>{tab.label}</span>
          </button>
        )
      })}
    </div>
  )
}