interface SubNavProps {
  tabs: { key: string; label: string }[];
  activeTab: string;
  onTabChange: (key: string) => void;
}

export function SubNav({ tabs, activeTab, onTabChange }: SubNavProps) {
  return (
    <div className="max-w-5xl mx-auto w-full px-6 pt-4">
      <div className="flex gap-2 overflow-x-auto border-b border-warm-200 dark:border-warm-700">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            className={`cursor-pointer shrink-0 whitespace-nowrap px-4 py-2 text-sm font-medium border-b-2 ${
              activeTab === tab.key
                ? 'border-teal-500 text-teal-700 dark:text-teal-400'
                : 'border-transparent text-warm-500 dark:text-warm-400 hover:text-warm-700 dark:hover:text-warm-300'
            }`}
            onClick={() => onTabChange(tab.key)}
          >
            {tab.label}
          </button>
        ))}
      </div>
    </div>
  );
}
