import type { ComponentType } from 'react';
import { SegmentedNav } from '../../components/ui/surface';

interface SubTab<T extends string> {
  id: T;
  label: string;
  icon: ComponentType<{ size?: number; className?: string }>;
}

interface Props<T extends string> {
  tabs: readonly SubTab<T>[];
  active: T;
  onChange: (id: T) => void;
}

export default function SubTabs<T extends string>({ tabs, active, onChange }: Props<T>) {
  return (
    <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-12 md:px-6">
      <SegmentedNav tabs={tabs} active={active} onChange={onChange} />
    </div>
  );
}