import React from 'react'

interface TabItem {
  key: string
  label: string
  count?: number
  icon?: string
}

interface TabNavigationProps {
  items: TabItem[]
  activeTab: string
  onTabChange: (key: string) => void
  className?: string
}

export const TabNavigation: React.FC<TabNavigationProps> = ({
  items,
  activeTab,
  onTabChange,
  className = ''
}) => {
  return (
    <div className={`flex space-x-4 sm:space-x-8 border-b border-gray-200 overflow-x-auto ${className}`}>
      {items.map((item) => (
        <button
          key={item.key}
          onClick={() => onTabChange(item.key)}
          className={`pb-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
            activeTab === item.key
              ? 'border-primary text-primary'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          }`}
        >
          <span className="flex items-center gap-1">
            {item.icon && <span>{item.icon}</span>}
            {item.label}
            {typeof item.count === 'number' && ` (${item.count})`}
          </span>
        </button>
      ))}
    </div>
  )
}