'use client'

import { useState } from 'react'
import type { ComponentRenderProps } from '@json-render/react'

type Tab = { label: string; value: string; count?: number }

export function TabGroup({ element }: ComponentRenderProps) {
  const { tabs, activeTab } = element.props as { tabs: Tab[]; activeTab?: string; dataPath?: string }
  const [active, setActive] = useState(activeTab || tabs[0]?.value)

  return (
    <div className="flex border-b border-gray-200 mb-4">
      {tabs.map(tab => (
        <button
          key={tab.value}
          onClick={() => setActive(tab.value)}
          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
            active === tab.value
              ? 'border-indigo-600 text-indigo-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          }`}
        >
          {tab.label}
          {tab.count !== undefined && (
            <span className="ml-1.5 px-1.5 py-0.5 bg-gray-100 text-gray-500 rounded-full text-xs">
              {tab.count}
            </span>
          )}
        </button>
      ))}
    </div>
  )
}
