/components/checkmark/checkmark

import { checkmark } from "@hedia/hexui/components/checkmark";
import { prose } from "@hedia/hexui/components/prose";
import { div, h2 } from "@hedia/html/elements";

export default {
  Default,
  Colors,
  Sizes,
  Confirmation,
};

export function Default() {
  return [checkmark()];
}

export function Colors() {
  return [
    checkmark({ size: "md", color: "primary" }),
    checkmark({ size: "md", color: "base" }),
    checkmark({ size: "md", color: "green" }),
    checkmark({ size: "md", color: "red" }),
    checkmark({ size: "md", color: "yellow" }),
  ];
}

export function Sizes() {
  return [
    checkmark({ size: "xs" }),
    checkmark({ size: "sm" }),
    checkmark({ size: "md" }),
    checkmark({ size: "lg" }),
    checkmark({ size: "xl" }),
  ];
}

export function Confirmation() {
  return [
    div(
      { class: "align-items-center" },
      checkmark({ size: "lg", color: "green", "aria-hidden": "true" }),
      prose(h2({ align: "center" }, "Payment received")),
    ),
  ];
}