import { Component, h } from "atomico";
import style from "./kun-navigator.css";
import { getComponentOrDefine, redirect } from "../../hooks/aync-hook/redirect";

const KunNavigator = ({ name }): Component => {
  const clickMessage = (): void => {
    redirect("/global-style");
  };
  return (
    <host>
      <style>{style}</style>
      <nav className="flex items-center justify-between flex-wrap w-auto on inline-block element">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <img src="https://www.xunlianying.vip/web/plume/assets/logo.png" className="kun-navigator-image-logo" alt="logo" />
          <span className="font-semibold text-xl tracking-tight kun-navigator-logo-title">{name}</span>
        </div>
        <div class="block lg:hidden" />
        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
          <div class="text-sm lg:flex-grow">
            <a
              href="#responsive-header"
              className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"
            >
              发现
            </a>
            <a
              href="#responsive-header"
              className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"
            >
              Examples
            </a>
            <a href="#responsive-header" className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
              专辑
            </a>
          </div>
          <div>
            <span className="icon-with-name" onclick={clickMessage} role="presentation">
              <div className="message-icon icon" />
              消息
            </span>
          </div>
        </div>
      </nav>
    </host>
  );
};

KunNavigator.props = {
  name: {
    type: String,
    value: "马上训练营",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
  message: {
    type: String,
    value: "kun-navigator",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-navigator", KunNavigator);
