import { LitElement, html, css } from 'lit';

class HelpTooltip extends LitElement {
  static properties = {
    text: { type: String }
  };

  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #616161;
      color: #9e9e9e;
      font-size: 10px;
      cursor: help;
    }

    .icon:hover {
      background: #757575;
      color: #e0e0e0;
    }

    .icon:hover + .tooltip {
      display: block;
    }

    .tooltip {
      display: none;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 8px;
      padding: 8px 12px;
      background: #212121;
      color: #e0e0e0;
      font-size: 12px;
      font-weight: normal;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 1000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .tooltip::before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-bottom-color: #212121;
    }
  `;

  constructor() {
    super();
    this.text = '';
  }

  render() {
    return html`
      <span class="icon">?</span>
      <span class="tooltip">${this.text}</span>
    `;
  }
}

customElements.define('help-tooltip', HelpTooltip);