import React from 'react'

type NavItem = {
  id: string
  label: string
  icon?: string
}

type Props = {
  items: NavItem[]
  activeId: string
  onSelect: (id: string) => void
}

export const NavStrip: React.FC<Props> = ({ items, activeId, onSelect }) => {
  return (
    <nav className="nav-strip">
      {items.map((item) => (
        <button
          key={item.id}
          className={`nav-strip-item ${activeId === item.id ? 'active' : ''}`}
          onClick={() => onSelect(item.id)}
        >
          {item.icon && <span className="nav-icon">{item.icon}</span>}
          <span className="nav-label">{item.label}</span>
        </button>
      ))}
    </nav>
  )
}