import type { ComponentType } from 'react';

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 md:-mx-6 px-3 md:px-6 -mt-3 md:-mt-6 pt-3 md:pt-6 pb-4 bg-[#F8F9FB] shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)]">
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        <div className="p-1 flex gap-1">
          {tabs.map(({ id, label, icon: Icon }) => {
            const isActive = active === id;
            return (
              <button
                key={id}
                onClick={() => onChange(id)}
                className={`flex-1 flex items-center justify-center gap-1.5 rounded-xl py-1.5 text-[12px] font-bold transition-all ${
                  isActive ? 'bg-blue-50 text-blue-600' : 'text-slate-400 hover:bg-slate-50'
                }`}
              >
                <Icon size={14} />
                <span>{label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}