import { type ReactNode } from 'react';

export interface NavItem {
  id: string;
  label: string;
  href?: string;
}

interface Props {
  logo?: ReactNode;
  items: NavItem[];
  activeId?: string;
  onSelect?: (id: string) => void;
  actions?: ReactNode;
}

export function GlassAppleNav({
  logo,
  items,
  activeId,
  onSelect,
  actions,
}: Props) {
  return (
    <nav
      className="
        flex items-center gap-1 max-w-full overflow-x-auto
        px-2 py-1.5
        rounded-full
        bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
        shadow-[var(--shadow-sm),var(--glass-inset)]
      "
    >
      {logo && <div className="px-3">{logo}</div>}

      <div className="flex items-center gap-0.5 min-w-max">
        {items.map((item) => {
          const isActive = item.id === activeId;
          return (
            <button
              key={item.id}
              type="button"
              onClick={() => onSelect?.(item.id)}
              className={`
                press-feedback px-3 py-1.5 rounded-full text-sm whitespace-nowrap
                transition-colors
                ${isActive
                  ? 'bg-[var(--color-accent)] text-[var(--color-bg)] font-medium'
                  : 'text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:bg-[var(--glass-bg)]'
                }
              `}
            >
              {item.label}
            </button>
          );
        })}
      </div>

      {actions && <div className="px-2">{actions}</div>}
    </nav>
  );
}