import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
import { icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';

declare global {
  interface HTMLElementTagNameMap {
    'sdig-workspace-placeholder': SdigWorkspacePlaceholder;
  }
}

@customElement('sdig-workspace-placeholder')
export class SdigWorkspacePlaceholder extends DeesElement {
  public static demo = () => workspaceDemoFrame(html`<sdig-workspace-placeholder label="Templates" subtitle="Reusable agreement templates"></sdig-workspace-placeholder>`);
  public static demoGroups = ['Signature Digital Workspace'];

  @property({ type: String }) public accessor label: string = 'Section';
  @property({ type: String }) public accessor subtitle: string = 'Coming soon';
  public static styles = [workspaceBaseStyles];

  public render(): TemplateResult {
    return html`${topBar({ breadcrumb: ['signature.digital', this.label], title: this.label, subtitle: pill('coming soon') })}<div class="content-scroll" style="display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--text-muted); gap: 8px;">${icon('folder', 32)}<div style="font-size: 13px; color: var(--text-sec);">${this.label}</div><div style="font-size: 11px;">${this.subtitle}</div></div>`;
  }
}