import type { ReactNode } from "react";

export function TopNav({
  items,
  rightSlot,
}: {
  items: { label: string }[];
  rightSlot?: ReactNode;
}) {
  return (
    <header className="flex flex-wrap items-center justify-between gap-4 rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-4 py-3">
      <div className="flex flex-wrap gap-4">
        {items.map((item) => (
          <button className="text-sm text-[var(--uhuru-text-secondary)]" key={item.label} type="button">
            {item.label}
          </button>
        ))}
      </div>
      {rightSlot}
    </header>
  );
}