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

@customElement('default-header')
export class DefaultHeader extends DeesElement {
  @property()
  public someProperty = 'someProperty';

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        height: 100px;
      }
      :host([hidden]) {
        display: none;
      }

      .headerMain {
        background: var(--background-accent);
        color: #fff;
        position: relative;
        z-index: 1;
        height: 100px;
      }
      .headerMain:after {
        background: inherit;
        bottom: 0;
        content: '';
        display: block;
        height: 60%;
        left: 0;
        position: absolute;
        right: 0;
        transform: skewY(-2deg);
        transform-origin: 100%;
        z-index: -1;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="headerMain">${this.someProperty}</div>
      <slot></slot>
    `;
  }
}