import { Component, h } from "atomico";
import "../kun-icon/kun-icon";
import { getComponentOrDefine, redirect } from "../../hooks/aync-hook/redirect";
import style from "./kun-editor-header.scss";

const KunEditorHeader: Component = () => {
  const click2Home = (): void => {
    redirect("/web/plume/moment");
  };
  return (
    <host shadowDom>
      <style>{style}</style>
      <div className="fixed-header">
        <div className="centered">
          <div className="navigator">
            <div className="logo" onclick={click2Home} role="presentation">
              <kun-icon iconType="logo" class="header-img-logo" iconWidth={100} iconHeight={100} />
            </div>
          </div>
          <slot name="submit" />
        </div>
      </div>
    </host>
  );
};

KunEditorHeader.props = {
  message: {
    type: String,
    value: "kun-editor-header",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-editor-header", KunEditorHeader);
