// components/error-toast.js
import { LitElement, html, css } from 'lit'
import { store } from '../store/index.js'
import { StoreController } from '../controllers/store-controller.js'

class ErrorToast extends LitElement {
  #error = new StoreController(this, store, s => s.error)

  static styles = css`
    :host {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 1000;
    }

    .toast {
      background: #ef4444;
      color: white;
      padding: 1rem 1.5rem;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 1rem;
      min-width: 300px;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from {
        transform: translateX(400px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .message {
      flex: 1;
      font-size: 0.9rem;
    }

    .close {
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 1.2rem;
      padding: 0;
      opacity: 0.8;
    }

    .close:hover {
      opacity: 1;
    }
  `

  render() {
    if (!this.#error.value) {
      return html``
    }

    return html`
      <div class="toast">
        <span class="message">${this.#error.value}</span>
        <button 
          class="close" 
          @click=${() => store.getState().clearError()}
          aria-label="Close"
        >×</button>
      </div>
    `
  }
}

customElements.define('error-toast', ErrorToast)