export const skinNames = ["material"] as const;
export type SkinName = (typeof skinNames)[number];

export const defaultSkin: SkinName = "material";

export const skinDetails = {
  material: {
    label: "Material",
    note: "One tonal, rounded, dynamic-color-first component language"
  }
} as const satisfies Record<SkinName, { label: string; note: string }>;

function getTargetElement(root?: HTMLElement) {
  if (root) {
    return root;
  }

  if (typeof document === "undefined") {
    return undefined;
  }

  return document.documentElement;
}

export function setSkin(skin: SkinName, root?: HTMLElement) {
  const target = getTargetElement(root);

  if (!target) {
    return;
  }

  target.dataset.skin = skin;
}