// @ts-ignore
import darkmodeScript from "./scripts/darkmode.inline"
import styles from "./styles/darkmode.scss"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { i18n } from "../i18n"
import { classNames } from "../util/lang"
import { SunIcon, MoonIcon } from "./LucideIcon"

const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
  return (
    <button class={classNames(displayClass, "darkmode")}>
      <SunIcon size={18} strokeWidth={1.5} class="dayIcon" aria-label={i18n(cfg.locale).components.themeToggle.darkMode} />
      <MoonIcon size={18} strokeWidth={1.5} class="nightIcon" aria-label={i18n(cfg.locale).components.themeToggle.lightMode} />
    </button>
  )
}

Darkmode.beforeDOMLoaded = darkmodeScript
Darkmode.css = styles

export default (() => Darkmode) satisfies QuartzComponentConstructor
