// Segmented pill selector — the page-level tab strip and the observe
// dashboard bar share the styling.

export function PillTabs(props: {
  items: readonly { id: string; label: string }[];
  value: string;
  onSelect: (id: string) => void;
}) {
  return (
    <div className="flex w-fit items-center gap-1 rounded-md border border-surface-2 bg-surface-0 p-1">
      {props.items.map((item) => (
        <button
          key={item.id}
          type="button"
          onClick={() => props.onSelect(item.id)}
          className={`rounded px-3 py-1.5 text-sm font-medium transition-colors ${
            props.value === item.id
              ? "bg-accent-muted text-accent"
              : "text-text-secondary hover:text-text-primary"
          }`}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}