import { html, LitElement, css, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import "@supersoniks/concorde/core/components/ui/card/card-header-descripton";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
const tagName = "sonic-card-header";

@customElement(tagName)
export class CardHeader extends LitElement {
  static styles = [
    css`
      :host {
        --sc-card-header-mb: 1.35rem;
        --sc-card-header-font-size: 1.875rem;
        --sc-card-header-font-weight: var(--sc-headings-font-weight, 700);
        --sc-card-header-font-style: var(--sc-headings-font-style, normal);
        --sc-card-header-family: var(
          --sc-headings-font-family,
          var(--sc-font-family-base, sans-serif)
        );
        --sc-card-header-line-height: var(--sc-headings-line-height, 1.1);
        display: flex;
        align-items: flex-start;
        gap: 0.5em 1em;
        margin-bottom: var(--sc-card-header-mb);
        line-height: var(--sc-card-header-line-height);
        font-family: var(--sc-card-header-font-family);
        font-size: var(--sc-card-header-font-size);
        font-style: var(--sc-card-header-font-style);
        font-weight: var(--sc-card-header-font-weight);
      }
      @media print {
        :host {
          --sc-card-header-font-size: 1.45rem;
        }
      }

      .header-content {
        flex-grow: 1;
      }

      slot[name="suffix"] {
        flex-shrink: 0;
      }

      ::slotted(sonic-card-header-description) {
        margin-top: 0.1em;
      }
    `,
  ];

  @property() label!: string;
  @property() description!: string;

  render() {
    return html`
      <div class="header-content">
        ${unsafeHTML(this.label)}
        ${this.description
          ? html`<sonic-card-header-description
              >${unsafeHTML(this.description)}</sonic-card-header-description
            >`
          : nothing}
        <slot></slot>
      </div>
      <slot name="suffix"></slot>
    `;
  }
}