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 {
  return (
    <div
      role="tablist"
      className="flex items-end border-b border-hairline gap-xs"
    >
      {items.map((item) => {
        const isActive = item.id === activeId;
        return (
          <button
            key={item.id}
            role="tab"
            aria-selected={isActive}
            type="button"
            onClick={() => onChange(item.id)}
            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>
  );
}