export interface SectionTab<T extends string> {
  id: T
  label: string
  count?: number
}

interface SectionTabsProps<T extends string> {
  tabs: SectionTab<T>[]
  activeTab: T
  onChange: (tab: T) => void
  className?: string
}

export default function SectionTabs<T extends string>({
  tabs,
  activeTab,
  onChange,
  className = '',
}: SectionTabsProps<T>) {
  return (
    <div className={`sticky top-0 z-20 border-b border-gray-200 bg-white/95 py-3 backdrop-blur dark:border-gray-800 dark:bg-gray-950/95 ${className}`}>
      <div className="flex gap-2 overflow-x-auto">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            type="button"
            onClick={() => onChange(tab.id)}
            className={
              activeTab === tab.id
                ? 'whitespace-nowrap rounded-lg bg-primary-600 px-3 py-2 text-sm font-semibold text-white'
                : 'whitespace-nowrap rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 dark:border-gray-700 dark:text-gray-300 dark:hover:text-primary-300'
            }
          >
            {tab.label}
            {typeof tab.count === 'number' ? (
              <span className={activeTab === tab.id ? 'ml-2 text-primary-100' : 'ml-2 text-gray-500 dark:text-gray-400'}>
                {tab.count.toLocaleString()}
              </span>
            ) : null}
          </button>
        ))}
      </div>
    </div>
  )
}