import * as React from 'react';

import { cn } from '@/lib/utils';

export interface TabBarItem<T extends string = string> {
  id: T;
  label: React.ReactNode;
}

interface TabBarProps<T extends string> {
  tabs: TabBarItem<T>[];
  activeTab: T;
  onTabChange: (id: T) => void;
  tablistId: string;
  ariaLabel: string;
  className?: string;
}

export function TabBar<T extends string>({
  tabs,
  activeTab,
  onTabChange,
  tablistId,
  ariaLabel,
  className,
}: TabBarProps<T>) {
  return (
    <div
      role="tablist"
      aria-label={ariaLabel}
      className={cn('mt-5 flex flex-wrap gap-1 border-b border-gray-200 pb-px', className)}
      onKeyDown={(e) => {
        if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
        e.preventDefault();
        const idx = tabs.findIndex((t) => t.id === activeTab);
        const delta = e.key === 'ArrowRight' ? 1 : -1;
        const next = tabs[(idx + delta + tabs.length) % tabs.length];
        onTabChange(next.id);
        document.getElementById(`${tablistId}-tab-${next.id}`)?.focus();
      }}
    >
      {tabs.map((tab) => (
        <button
          key={tab.id}
          id={`${tablistId}-tab-${tab.id}`}
          role="tab"
          type="button"
          aria-selected={activeTab === tab.id}
          aria-controls={`${tablistId}-panel-${tab.id}`}
          tabIndex={activeTab === tab.id ? 0 : -1}
          onClick={() => onTabChange(tab.id)}
          className={cn(
            'rounded-t-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9333ea]',
            activeTab === tab.id
              ? 'border border-b-0 border-gray-200 bg-white text-gray-900 -mb-px'
              : 'text-gray-500 hover:text-gray-800',
          )}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}