/**
 * Non-side-effect class export for `<card-ui>`.
 *
 * Importing this file gives you the class(es) without auto-registering the tag.
 * Useful for test isolation, subclassing with tag-name override, or selective
 * composition.
 *
 * The auto-register path stays at `@adia-ai/web-components/components/card`
 * (which imports this file + calls `defineIfFree()`).
 *
 * @see ../../USAGE.md#registration--auto-vs-explicit
 */

/**
 * <card-ui> — Bordered container with header, body, and footer.
 *
 * Usage:
 *   <card-ui>
 *     <header>
 *       <span slot="heading">Title</span>
 *       <span slot="description">Subtitle text</span>
 *       <button-ui slot="action" variant="ghost" icon="dots-three"></button-ui>
 *     </header>
 *     <section>Body content</section>
 *     <footer>
 *       <span slot="description">Footer note</span>
 *       <button-ui slot="action" text="Save" variant="primary"></button-ui>
 *     </footer>
 *   </card-ui>
 *
 * Attributes:
 *   variant   — "default" | "outlined" | "filled" | "ghost"
 *   size      — "sm" | "md" | "lg" (controls padding + font scale)
 *   elevation — 0-3 (shadow depth)
 *   raw       — strips all chrome (border, bg, shadow, padding)
 *   draggable — enables drag handle + cursor:grab; wires the draggable trait
 */

import { UIElement } from '../../core/element.js';
import { draggable } from '../../traits/draggable/draggable.js';

export class UICard extends UIElement {
  static properties = {
    variant:   { type: String,  default: 'default', reflect: true },
    size:      { type: String,  default: '',         reflect: true },
    elevation: { type: Number,  default: 1,          reflect: true },
    raw:       { type: Boolean, default: false,       reflect: true },
    draggable: { type: Boolean, default: false,       reflect: true },
  };

  static template = () => null;

  #dragAttached = false;

  connected() {
    if (this.draggable && !this.#dragAttached) {
      this.addTrait(draggable);
      this.#dragAttached = true;
    }
  }

  updated(changed) {
    if (changed.has('draggable') && this.draggable && !this.#dragAttached) {
      this.addTrait(draggable);
      this.#dragAttached = true;
    }
  }
}
