'use client';

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

export type InboxCategory = 'all' | 'orders' | 'shipping' | 'payouts' | 'system';

const TABS: Array<{ key: InboxCategory; label: string }> = [
  { key: 'all',      label: 'All' },
  { key: 'orders',   label: 'Orders' },
  { key: 'shipping', label: 'Shipping' },
  { key: 'payouts',  label: 'Payouts' },
  { key: 'system',   label: 'System' },
];

export interface InboxCategoryTabsProps {
  active: InboxCategory;
  onChange: (cat: InboxCategory) => void;
}

export function InboxCategoryTabs({ active, onChange }: InboxCategoryTabsProps) {
  return (
    <div role="tablist" className="flex gap-1 border-b border-forest/10 px-1">
      {TABS.map((tab) => {
        const isActive = tab.key === active;
        return (
          <button
            key={tab.key}
            role="tab"
            aria-selected={isActive}
            onClick={() => onChange(tab.key)}
            className={cn(
              '-mb-px border-b-2 px-3 py-2 text-sm font-medium transition-colors',
              isActive
                ? 'border-terracotta text-terracotta'
                : 'border-transparent text-forest/60 hover:text-forest',
            )}
          >
            {tab.label}
          </button>
        );
      })}
    </div>
  );
}