import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('arx-error-view')
export class ErrorView extends LitElement {
  @property()
  error!: string;

  static override styles = css`
    :host {
      display: block;
      margin: 0.75rem 0;
    }

    .error-container {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-radius: var(--radius-field);
      background-color: var(--color-error);
      color: var(--color-error-content);
      box-shadow: 0 2px 5px oklch(from var(--color-error) l c h / 0.2);
      border-left: calc(var(--border) * 2) solid
        oklch(from var(--color-error-content) l c h / 0.8);
      animation: fadeIn 0.3s ease-out forwards;
    }

    .error-message {
      flex: 1;
      font-weight: 500;
      line-height: 1.5;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 640px) {
      .error-container {
        padding: 0.625rem 0.875rem;
      }
    }
  `;

  override render() {
    return html`
      <div class="error-container" role="alert">
        <iconify-icon icon="mdi:alert-circle" width="24"></iconify-icon>
        <div class="error-message">${this.error}</div>
      </div>
    `;
  }
}
