import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('nav-bar')
export class NavBar extends LitElement {
  static styles = css`
    nav {
      background: #222;
      color: white;
      display: flex;
      justify-content: space-between;
      padding: 1rem;
    }
    a {
      color: white;
      margin-right: 1rem;
      text-decoration: none;
    }
  `;
  navigate(path: string) {
    this.dispatchEvent(new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true }));
  }
  render() {
    return html`
      <nav>
        <div>🎈 Balloon Tracker</div>
        <div>
          <a href="/" @click=${(e: Event) => (e.preventDefault(), this.navigate('/'))}>
            Home
          </a>
          <a
            href="/tracks"
            @click=${(e: Event) => (e.preventDefault(), this.navigate('/tracks'))}
          >
            Tracks
          </a>
          <a
            href="/about"
            @click=${(e: Event) => (e.preventDefault(), this.navigate('/about'))}
          >
            About
          </a>
        </div>
      </nav>
    `;
  }
}