// @ts-check
import { WebComponent, html } from '../../src/index.js'

class StyledElements extends WebComponent {
  static props = {
    condition: false,
    type: 'info',
  }

  #typeStyles = {
    info: {
      backgroundColor: 'blue',
      border: '1px solid green',
    },
    warn: {
      backgroundColor: 'yellow',
      border: '1px solid orange',
    },
    error: {
      backgroundColor: 'orange',
      border: '1px solid red',
    },
  }

  get template() {
    return html`
      <div
        style=${{
          ...this.#typeStyles[this.props.type],
          padding: '1em',
        }}
      >
        <p style=${{ fontStyle: this.props.condition && 'italic' }}>Wow!</p>
      </div>
    `
  }
}

customElements.define('styled-elements', StyledElements)