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

@customElement('ui-card')
export class UiCard extends LitElement {
  static styles = css`
    :host {
      display: block;
      width: 100%;
      max-width: 420px;
    }

    .card {
      width: 100%;
      background: var(--color-bg-nav);
      border: 1px solid var(--color-border);
      border-radius: 1rem;
      padding: 2.5rem 2rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.12);
      backdrop-filter: blur(12px);
    }

    :host([centered]) .card {
      align-items: center;
      text-align: center;
    }
  `;

  @property({ type: Boolean, reflect: true }) centered = false;

  render() {
    return html`
      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}