mimic/frontend/src/components/Tabs.tsx

import type { KeyboardEvent } from 'react';

interface TabItem {
  id: string;
  label: string;
  count?: number;
}

interface TabsProps {
  items: TabItem[];
  activeId: string;
  onChange: (id: string) => void;
}

export function Tabs({ items, activeId, onChange }: TabsProps): JSX.Element {
  function handleKeyDown(e: KeyboardEvent<HTMLButtonElement>, index: number) {
    if (e.key === 'ArrowRight') {
      e.preventDefault();
      onChange(items[(index + 1) % items.length].id);
    } else if (e.key === 'ArrowLeft') {
      e.preventDefault();
      onChange(items[(index - 1 + items.length) % items.length].id);
    }
  }

  return (
    <div
      role="tablist"
      className="flex items-end border-b border-hairline gap-xs"
    >
      {items.map((item, index) => {
        const isActive = item.id === activeId;
        return (
          <button
            key={item.id}
            id={`tab-${item.id}`}
            role="tab"
            aria-selected={isActive}
            aria-controls={`tabpanel-${item.id}`}
            type="button"
            onClick={() => onChange(item.id)}
            onKeyDown={(e) => handleKeyDown(e, index)}
            className={`tab-underline${isActive ? ' tab-underline-active' : ''} pb-xs`}
          >
            {item.label}
            {item.count !== undefined ? (
              <span
                className={`ml-xxs tab-count-pill${isActive ? ' tab-count-pill-active' : ''}`}
              >
                {item.count}
              </span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}