// pages/home/home-page.ts (updated)
import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators.js";
import "../components/hero-icon.ts";
import "../components/button/primary-button.ts";
import "../components/button/secondary-button.ts";
import "../components/input/text-input.ts";

@customElement("home-page")
export class HomePage extends LitElement {
  static styles = css`
    :host {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  `;

  private navigate(path: string) {
    this.dispatchEvent(
      new CustomEvent("nav", {
        detail: { path },
        bubbles: true,
        composed: true,
      }),
    );
  }

  render() {
    return html`
      <primary-button name="Login"></primary-button>
      <primary-button label="Download" icon="download"></primary-button>
      <primary-button
        label="Download"
        icon="download"
        disabled
      ></primary-button>
      <secondary-button name="Login"></secondary-button>
      <secondary-button label="Download" icon="download"></secondary-button>
      <secondary-button
        label="Download"
        icon="download"
        disabled
      ></secondary-button>
      <text-input placeholder="Nicht editierbar" disabled></text-input>
      <text-input
        value="a.brunner@cia-d.de"
        .onChange=${(v: string) => console.log(v)}
      ></text-input>
      <text-input placeholder="Passwort" password></text-input>

    `;
  }
}
