import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
import { shxElementStyles } from './tokens.js';

declare global {
  interface HTMLElementTagNameMap {
    'shx-icon': ShxIcon;
  }
}

@customElement('shx-icon')
export class ShxIcon extends DeesElement {
  public static demo = () => html`<shx-icon></shx-icon>`;
  public static demoGroups = ['smarthome.exchange primitives'];

  public static styles = [
    ...shxElementStyles,
    css`
      :host {
        display: inline-flex;
        width: 24px;
        height: 24px;
        color: var(--shx-accent);
      }
      svg {
        width: 100%;
        height: 100%;
      }
    `,
  ];

  public render() {
    return html`
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 9.5 12 3l8 6.5V20a1 1 0 0 1-1 1h-5v-7h-4v7H5a1 1 0 0 1-1-1V9.5Z"></path>
        <path d="M9 21v-7h6v7"></path>
      </svg>
    `;
  }
}