import type { ReactNode } from 'react';

/** Available tile widths — fractions of the row. */
export type TileSpan = 1 | 2 | 3 | 4;

export interface TileSpec {
  /** Stable id — used as React key + persistence key. */
  id: string;
  /** Title rendered in the tile header (also used as the drag handle label). */
  title: string;
  /** Optional one-line subtitle. */
  subtitle?: string;
  /** Body slot. */
  content: ReactNode;
  /** Default tile width. Default 2. */
  defaultSpan?: TileSpan;
}

export interface LayoutEntry {
  id: string;
  span: TileSpan;
}

export interface LayoutSpec {
  /** Ordered list of tile ids + spans. */
  entries: LayoutEntry[];
}

export interface LayoutPersistence {
  /** Called on every layout change. Default writes to localStorage. */
  save: (key: string, layout: LayoutSpec) => void | Promise<void>;
  /** Loaded once on mount. Default reads from localStorage. */
  load: (key: string) => LayoutSpec | null | Promise<LayoutSpec | null>;
}
