import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { UsBaseElement } from '../base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import type { IEmptyStateProps } from './model/IEmptyStateProps'
import UsEmptyState_css from './empty-state.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-empty-state': UsEmptyState
  }
}

@customElementIfNotExist('us-empty-state')
export class UsEmptyState extends UsBaseElement implements IEmptyStateProps {
  static styles = [
    UsBaseElement.styles,
    css([UsEmptyState_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) title = ''
  @property({ type: String }) description = ''
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'empty_state'

  render() {
    return html`
      <div class="empty-state-wrapper">
        <slot name="pointerArrow"></slot>
        ${this.title ? html`<h3 class="empty-state-wrapper__title">${this.title}</h3>` : ''}
        ${this.description ? html`<div class="empty-state-wrapper__description">${this.description}</div>` : ''}
        <slot name="actions"></slot>
      </div>
    `
  }
}