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

declare global {
  interface HTMLElementTagNameMap {
    'sg-sectionheading': SgSectionheading;
  }
}

@customElement('sg-sectionheading')
export class SgSectionheading extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        margin-bottom: 16px;
      }
      .heading {
        font-size: 20px;
        font-weight: 700;
        color: ${cssManager.bdTheme('#111', '#fff')};
        font-family: "JetBrains Mono", monospace;
        padding-bottom: 8px;
        border-bottom: 2px solid ${cssManager.bdTheme('#111', '#fff')};
      }
    `,
  ];

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