import type Widget from "../../../Widget.js";
import type { WidgetProperties } from "../../../Widget.js";

export interface CardViewProperties extends WidgetProperties, Partial<Pick<CardView, "layout">> {}

export type CardLayout = "auto" | "stack" | "side-by-side";

/** In wide views, the legend has a landscape orientation that allows users to scroll horizontally to view all legend elements. This style can be responsive, making it ideal for mobile web apps. In smaller views, the legend collapses to occupy less space. One element is shown at a time in a card-style layout, which the user can navigate horizontally. */
export default abstract class CardView extends Widget {
  /**
   * You can specify one of the following layout options.
   *
   * Value | Description
   * ------|------------
   * auto | This layout is responsive so that in wide views the legend has a `side-by-side` layout, and a `stack` layout in smaller (mobile) views.
   * side-by-side | The legend has a landscape orientation that allows users to scroll horizontally to view multiple legend cards at a time.
   * stack | The legend cards are stacked, which conserves space, but restricts the user to seeing only one card at a time.
   *
   * @default "stack"
   */
  accessor layout: CardLayout;
  /** The type of style. For Card this value is always `card`. */
  get type(): "card";
}