import { html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { tailwind } from "../tailwind";

import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";

@customElement("docs-user")
export class user extends Subscriber(LitElement) {
  // add tailwind
  static styles = [tailwind];

  @property({ type: String }) id = "";
  @property({ type: String }) avatar = "";
  @property({ type: String }) first_name = "";
  @property({ type: String }) email = "";
  @property({ type: String }) last_name = "";

  render() {
    return html`<div
      class="flex items-center gap-3 rounded-md hover:bg-neutral-50 -mx-2 p-2"
    >
      <sonic-image
        src=${this.avatar}
        rounded="md"
        ratio="1/1"
        class="w-16 block"
      ></sonic-image>
      <div>
        <div>
          ${this.first_name} <span class="font-bold">${this.last_name}</span>
        </div>
        <div class="text-sm text-neutral-400">${this.email}</div>
      </div>
      <div class="ml-auto relative">
        ${this.id == "2" || this.id == "5"
          ? html`
              <sonic-badge
                type="danger"
                size="2xs"
                class="absolute left-0 -top-1 z-10"
              >
                ${this.id}</sonic-badge
              >
            `
          : nothing}
        <sonic-button
          href="mailto:${this.email}"
          size="sm"
          variant="outline"
          shape="circle"
          class="relative"
          icon
        >
          <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
        </sonic-button>
      </div>
    </div>`;
  }
}