import { LitElement } from "lit";
import { html } from "lit";
import { customElement } from "lit/decorators.js";
import "./queue";
import { tailwind } from "../../../../docs/tailwind";

@customElement("sonic-queue-demo")
export class QueueDemo extends LitElement {
  static styles = [tailwind];

  private items = (item: any) => html`
    <div class="bg-neutral-100 p-2 rounded-md">
      <div class="font-medium">${item.nom}</div>
      <div class="text-sm text-gray-600">Code: ${item.code}</div>
    </div>
  `;
  private noItems = () => html`
    <div class="flex flex-col items-center justify-center p-4 text-gray-500">
      <p>Aucune commune trouvée</p>
    </div>
  `;

  render() {
    return html`
      <div class="p-4">
        <h2 class="text-xl font-medium mb-4">Liste des communes</h2>
        <sonic-queue
          class="grid grid-cols-3 gap-3"
          serviceurl="https://geo.api.gouv.fr/"
          dataproviderexpression="communes?limit=$limit"
          limit="30"
          .items=${this.items}
          .noItems=${this.noItems}
        ></sonic-queue>
      </div>
    `;
  }
}