Eve/src/components/ProgressSteps.ts

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

@customElement('arx-progress-steps')
export class ProgressSteps extends LitElement {
  @property({ type: Number }) currentPage = 1;
  @property({ type: Array }) pageLabels: string[] = [];

  static override styles = css`
    :host {
      display: block;
      width: 100%;
      margin-bottom: calc(var(--spacing-unit) * 8);
    }

    .progress-container {
      display: flex;
      flex-direction: column;
      gap: calc(var(--spacing-unit) * 2);
    }

    .progress-bar {
      width: 100%;
      height: 4px;
      background: var(--color-base-200);
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: var(--color-accent);
      transition: width 0.3s ease;
    }

    .page-indicators {
      display: flex;
      justify-content: space-between;
      padding: 0 calc(var(--spacing-unit) * 2);
    }

    .page-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(var(--spacing-unit) * 1);
    }

    .page-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-base-300);
      transition: all 0.3s ease;
    }

    .page-dot.active {
      background: var(--color-accent);
      transform: scale(1.2);
    }

    .page-dot.completed {
      background: var(--color-accent);
    }

    .page-label {
      font-size: 0.875rem;
      color: var(--color-secondary);
      transition: color 0.3s ease;
    }

    .page-label.active {
      color: var(--color-accent);
      font-weight: 500;
    }

    .page-label.completed {
      color: var(--color-accent);
    }
  `;

  override render() {
    const progress = ((this.currentPage - 1) / (this.pageLabels.length - 1)) * 100;

    return html`
      <div class="progress-container">
        <div class="progress-bar">
          <div
            class="progress-fill"
            style="width: ${progress}%"
          ></div>
        </div>
        <div class="page-indicators">
          ${this.pageLabels.map((label, index) => {
            const pageNum = index + 1;
            const isActive = pageNum === this.currentPage;
            const isCompleted = pageNum < this.currentPage;

            return html`
              <div class="page-indicator">
                <div
                  class="page-dot ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''}"
                ></div>
                <span
                  class="page-label ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''}"
                >${label}</span>
              </div>
            `;
          })}
        </div>
      </div>
    `;
  }
}