import { LitElement, html, css } from 'lit';
import { property } from 'lit/decorators.js';
import '@digital-realty/ix-icon/ix-icon.js';

export class IxGridNoRows extends LitElement {
  static styles = css`
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      padding: 2.5rem 0;
    }
    .icon {
      user-select: none;
      display: inline-block;
      fill: currentcolor;
      flex-shrink: 0;
      font-size: 1.5rem;
      color: rgb(255, 152, 0);
      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .warning,
    .error {
      user-select: none;
      color: var(--clr-warning, #ff9800);
    }
    .critical {
      color: var(--clr-critical, #db0028);
    }
    h2 {
      font-family: var(--ix-font-family, 'Red Hat Display');
    }
    h2.dlr-text-heading {
      margin: 0.5rem 0 0;
      font-family: 'Red Hat Display', sans-serif;
      font-style: normal;
      font-size: 1.5rem;
      line-height: 2rem;
      letter-spacing: 0em;
      color: rgb(9, 34, 65);
      text-align: center;
      font-weight: 700;
    }
  `;

  @property({ type: String }) type: 'warning' | 'info' | 'error' = 'error';

  @property({ type: String }) icon: string = 'error';

  @property({ type: String }) message: string = 'No data to display';

  @property({ type: String }) iconFontSize: string = '3rem';

  render() {
    return html`
      <div class="container" style="--ix-icon-font-size: ${this.iconFontSize};">
        <ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
        <h2 class="dlr-text-heading" data-testid="ix-grid-no-rows-heading">
          ${this.message}
        </h2>
      </div>
    `;
  }
}