import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

type $RestProps = SvelteHTMLElements["div"];

type $Props = {
  /**
   * Specify the kind of the shape indicator.
   * @default undefined
   */
  kind: "failed" | "critical" | "high" | "medium" | "low" | "cautious" | "undefined" | "stable" | "informative" | "incomplete" | "draft";

  /**
   * Specify the label displayed next to the shape.
   * @default undefined
   */
  label: string;

  /**
   * Specify the text size of the shape indicator.
   * @default 12
   */
  textSize?: 12 | 14;

  labelChildren?: (this: void) => void;

  [key: `data-${string}`]: unknown;
};

export type ShapeIndicatorProps = Omit<$RestProps, keyof $Props> & $Props;

export default class ShapeIndicator extends SvelteComponentTyped<
  ShapeIndicatorProps,
  Record<string, any>,
  { labelChildren: Record<string, never> }
> {}