// components/stat-card.ts
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('stat-card')
export class StatCard extends LitElement {
  static styles = css`
    :host {
      display: block;
    }

    .card {
      background: var(--color-bg-nav);
      border: 1px solid var(--color-border);
      border-radius: 0.75rem;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      transition: border-color 0.25s ease;
    }

    .card:hover {
      border-color: color-mix(
        in srgb,
        var(--color-accent) 40%,
        transparent
      );
    }

    .value {
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--color-accent);
    }

    .label {
      font-size: 0.85rem;
      color: color-mix(in srgb, var(--color-text) 55%, transparent);
      font-weight: 500;
    }
  `;

  @property() value = '';
  @property() label = '';

  render() {
    return html`
      <div class="card">
        <span class="value">${this.value}</span>
        <span class="label">${this.label}</span>
      </div>
    `;
  }
}