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

@customElement('ops-sectionheading')
export class OpsSectionHeading extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        margin-bottom: 24px;
      }

      .heading {
        font-family: 'Cal Sans', 'Inter', sans-serif;
        font-size: 28px;
        font-weight: 600;
        color: #111;
        margin: 0;
        padding: 0;
      }

      :host([theme="dark"]) .heading {
        color: #fff;
      }
    `,
  ];

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