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

declare global {
  interface HTMLElementTagNameMap {
    'idp-card': IdpCard;
  }
}

@customElement('idp-card')
export class IdpCard extends DeesElement {
  public static demo = () => html`<idp-card headline="Card title" description="Muted supporting text.">Card content</idp-card>`;
  public static demoGroups = ['idp.global v3 primitives'];

  @property({ type: String })
  public accessor headline = '';

  @property({ type: String })
  public accessor description = '';

  @property({ type: Boolean, reflect: true })
  public accessor elevated = false;

  public static styles = [
    ...idpElementStyles,
    css`
      :host {
        display: block;
      }
      .card {
        background: var(--idp-card);
        border: 1px solid var(--idp-border);
        border-radius: var(--idp-radius-lg);
        color: var(--idp-fg);
        padding: 20px;
      }
      :host([elevated]) .card {
        box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.28);
      }
      .head {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
      }
      .headline {
        font-size: 14px;
        font-weight: 650;
        line-height: 1.35;
      }
      .description {
        color: var(--idp-muted-fg);
        font-size: 13px;
        line-height: 1.5;
        margin-top: 3px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <section class="card" part="card">
        ${this.headline || this.description ? html`
          <div class="head">
            <div>
              ${this.headline ? html`<div class="headline">${this.headline}</div>` : html``}
              ${this.description ? html`<div class="description">${this.description}</div>` : html``}
            </div>
            <slot name="action"></slot>
          </div>
        ` : html``}
        <slot></slot>
      </section>
    `;
  }
}