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

@customElement("fd-clock")
export class FdClock extends LitElement {
  constructor() {
    super();
    setInterval(() => {
      this.requestUpdate();
    }, 1000);
  }
  static styles = [
    shared,
    css`
      :host {
        display: inline block;
      }
    `,
  ];
  render() {
    const t = new Date();
    const h = t.getHours().toString().padStart(2, "0");
    const m = t.getMinutes().toString().padStart(2, "0");
    const s = t.getSeconds().toString().padStart(2, "0");
    return html` <span class="t">${h}:${m.slice(0, 2)}:${s.slice(0, 2)}</span> `;
  }
}