// components/nav-bar.js
import { LitElement, html, css } from 'lit'

class NavBar extends LitElement {
  static properties = {
    user: { type: Object },
    route: { type: String }
  }

  static styles = css`
    :host {
      display: block;
      padding: 0 1.5rem;
      border-bottom: 1px solid #e2e8f0;
    }
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3.5rem;
    }
    .links { display: flex; gap: 1.5rem; }
    a {
      cursor: pointer;
      font-size: 0.9rem;
      color: #64748b;
      text-decoration: none;
    }
    a[active] { color: #0f172a; font-weight: 600; }
    .user { font-size: 0.85rem; color: #94a3b8; }
  `

  #navigate(route, e) {
    e.preventDefault()
    this.dispatchEvent(new CustomEvent('navigate', { 
      detail: { route },
      bubbles: true,
      composed: true
    }))
  }

  #link(route, label) {
    return html`
      <a
        href="/${route}"
        ?active=${this.route === route}
        @click=${(e) => this.#navigate(route, e)}
      >${label}</a>
    `
  }

  render() {
    return html`
      <nav>
        <div class="links">
          ${this.#link('home', 'Home')}
          ${this.#link('items', 'Items')}
        </div>
        <span class="user">${this.user?.name ?? 'Guest'}</span>
      </nav>
    `
  }
}

customElements.define('nav-bar', NavBar)