import type { LivePreviewColorItem } from "./types";

export const BASE_LAYOUT_LABELS: Record<string, string> = {
  wrap: "Wrap",
};

export const BASE_STYLE_LABELS: Record<string, string> = {
  underline: "Underline",
};

/**
 * Build a preview select element from an array of values.
 */
export function buildPreviewSelect(
  values: Array<{ value: string; label: string }>,
): HTMLSelectElement {
  const select = document.createElement("select");
  values.forEach((v) => {
    const opt = document.createElement("option");
    opt.value = v.value;
    opt.text = v.label;
    select.appendChild(opt);
  });
  return select;
}

/**
 * Live preview demo data for the shared admin preview.
 */
export function getLivePreviewDemoConfig(): {
  colors: LivePreviewColorItem[];
  buttons: LivePreviewColorItem[];
} {
  const colors: LivePreviewColorItem[] = [
    { value: "green", label: "Green", color: "#9EBAA0" },
    { value: "peach", label: "Peach", color: "#fb7185" },
    { value: "charcoal", label: "Charcoal", color: "#4b5563" },
    { value: "sky", label: "Sky", color: "#93c5fd" },
    { value: "lemon", label: "Lemon", color: "#fec339" },
    { value: "mint", label: "Mint", color: "#caffbf" },
  ];

  const buttons: LivePreviewColorItem[] = [
    { value: "green", label: "Green", color: "#9EBAA0" },
    { value: "peach", label: "Peach", color: "#fb7185" },
    { value: "charcoal", label: "Charcoal", color: "#4b5563" },
    { value: "sky", label: "Sky", color: "#93c5fd" },
    { value: "lemon", label: "Lemon", color: "#fec339" },
    { value: "mint", label: "Mint", color: "#caffbf" },
  ];

  return { colors, buttons };
}