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

declare global {
  interface HTMLElementTagNameMap {
    'dees-panel': DeesPanel;
  }
}

@customElement('dees-panel')
export class DeesPanel extends DeesElement {
  public static demo = demoFunc;

  @property({ type: String })
  public title: string = '';

  @property({ type: String })
  public subtitle: string = '';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 2px 4px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
        border: 1px solid ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
      }

      .title {
        margin: 0 0 16px 0;
        font-size: 18px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#0069f2', '#0099ff')};
      }

      .subtitle {
        margin: -12px 0 16px 0;
        font-size: 14px;
        color: ${cssManager.bdTheme('#666', '#999')};
      }

      .content {
        color: ${cssManager.bdTheme('#333', '#ccc')};
      }

      /* Remove margins from first and last children */
      .content ::slotted(*:first-child) {
        margin-top: 0;
      }

      .content ::slotted(*:last-child) {
        margin-bottom: 0;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      ${this.title ? html`<h3 class="title">${this.title}</h3>` : ''}
      ${this.subtitle ? html`<p class="subtitle">${this.subtitle}</p>` : ''}
      <div class="content">
        <slot></slot>
      </div>
    `;
  }
}