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

@customElement('objst-sectionheading')
export class ObjstSectionHeading extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        margin-bottom: 24px;
      }
      h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 0;
        color: ${cssManager.bdTheme('#1a1a2e', '#e0e0e0')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`<h1><slot></slot></h1>`;
  }
}