import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  property,
  type CSSResult,
  type TemplateResult,
} from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-hint.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-hint': DeesHint;
  }
}

@customElement('dees-hint')
export class DeesHint extends DeesElement {
  public static demo = demoFunc;

  @property({ type: String })
  public type: 'info' | 'warn' | 'error' | 'critical' = 'info';

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public static styles = [cssManager.defaultStyles, css``];

  public render(): TemplateResult {
    return html` <div class="mainbox"></div> `;
  }
}