'use client'

import { type ReactNode } from 'react'
import { cn } from '@/lib/utils'

/**
 * Forge Tabs — implements DESIGN.md §4.Tabs
 *
 * Underline tabs only. No pills, no chips.
 */

export interface TabItem<T extends string = string> {
  value: T
  label: ReactNode
  icon?: ReactNode
  count?: number
  disabled?: boolean
}

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

export function Tabs<T extends string = string>({
  items,
  value,
  onChange,
  className,
}: TabsProps<T>) {
  return (
    <div
      role="tablist"
      className={cn(
        'flex items-center gap-1 border-b border-hairline',
        className,
      )}
    >
      {items.map(item => {
        const active = item.value === value
        return (
          <button
            key={item.value}
            type="button"
            role="tab"
            aria-selected={active}
            disabled={item.disabled}
            onClick={() => onChange(item.value)}
            className={cn(
              'relative flex items-center gap-1.5 h-9 px-3 text-[13px] font-medium transition-colors',
              'focus:outline-none focus-visible:shadow-focus-ring',
              'disabled:opacity-50 disabled:cursor-not-allowed',
              active ? 'text-ink' : 'text-ink-muted hover:text-ink',
            )}
          >
            {item.icon && <span className="shrink-0">{item.icon}</span>}
            <span>{item.label}</span>
            {typeof item.count === 'number' && (
              <span
                className={cn(
                  'ml-1 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold',
                  active ? 'bg-primary-subtle text-brand-primary' : 'bg-surface-3 text-ink-muted',
                )}
              >
                {item.count}
              </span>
            )}
            {active && (
              <span
                aria-hidden
                className="absolute left-0 right-0 -bottom-px h-0.5 bg-brand-primary"
              />
            )}
          </button>
        )
      })}
    </div>
  )
}