/**
 * notion-enhancer
 * (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
 * (https://notion-enhancer.github.io/) under the MIT license
 */

function Button({ icon, variant, tagName, ...props }, ...children) {
  const { html, extendProps } = globalThis.__enhancerApi;
  extendProps(props, {
    class: `notion-enhancer--menu-button shrink-0
    flex gap-[8px] items-center px-[12px] rounded-[4px]
    h-[${variant === "sm" ? "28" : "32"}px] select-none
    transition duration-[20ms] ${
      variant === "primary"
        ? `text-[color:var(--theme--accent-primary\\_contrast)]
           font-medium bg-[color:var(--theme--accent-primary)]
           hover:bg-[color:var(--theme--accent-primary\\_hover)]`
        : variant === "secondary"
        ? `text-[color:var(--theme--accent-secondary)]
           border-(~ [color:var(--theme--accent-secondary)])
           hover:bg-[color:var(--theme--accent-secondary\\_hover)]`
        : variant === "brand"
        ? `text-white border-(~ purple-400)
           bg-purple-500 hover:(from-white/20 to-transparent
           bg-[linear-gradient(225deg,var(--tw-gradient-stops))])`
        : `border-(~ [color:var(--theme--fg-border)])
           not-disabled:hover:bg-[color:var(--theme--bg-hover)]
           disabled:text-[color:var(--theme--fg-secondary)]`
    }`,
  });
  tagName ??= props["href"] ? "a" : "button";
  return html`<${tagName} ...${props}>
    ${icon
      ? html`<i
          class="i-${icon}
          text-[${variant === "sm" && children.length ? "13" : "17"}px]"
        ></i>`
      : ""}
    <span class="text-[${variant === "sm" ? "13" : "14"}px] empty:hidden">
      ${children}
    </span>
  <//>`;
}

export { Button };