import type { ReactNode } from "react"

export interface TabItem {
  id: string
  label: ReactNode
  disabled?: boolean
}

interface TabsProps {
  items: TabItem[]
  value: string
  onValueChange: (value: string) => void
  ariaLabel: string
  className?: string
}

export function Tabs({ items, value, onValueChange, ariaLabel, className }: TabsProps) {
  return (
    <div className={["tabs", className].filter(Boolean).join(" ")} role="tablist" aria-label={ariaLabel}>
      {items.map((item) => {
        const active = item.id === value
        return (
          <button
            key={item.id}
            type="button"
            role="tab"
            aria-selected={active}
            className={"tab-trigger" + (active ? " active" : "")}
            disabled={item.disabled}
            onClick={() => onValueChange(item.id)}
          >
            {item.label}
          </button>
        )
      })}
    </div>
  )
}
