type Tab = { key: string; label: string };

type OrderStatusTabsProps = {
  tabs: Tab[];
  active: string;
  onChange: (key: string) => void;
};

export default function OrderStatusTabs({ tabs, active, onChange }: OrderStatusTabsProps) {
  return (
    <nav className="order-status-tabs">
      {tabs.map((t) => (
        <button
          key={t.key}
          type="button"
          className={`order-status-tab${active === t.key ? ' active' : ''}`}
          onClick={() => onChange(t.key)}
        >
          {t.label}
        </button>
      ))}
    </nav>
  );
}