import { Component, h } from "atomico";
import "../horse-button-comp/horse-button-comp";
import "../kun-icon/kun-icon";
import { CONST_SIX_CONFIG } from "../../common/config";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const style = `
    .brand-item {
        display: flex;
        align-items: center;
    }
    
    .brand-name {
        margin-right: 8px;
    }
    
    .logo-text {
        height: 35px;
        line-height: 35px;
        align-items: center;
        display: flex;
        justify-content: flex-start;
    }
    
    .right-side {
        padding-top: 6px;
        margin-left: 6px;
    }
    
    .brand-login {
      --deckgo-lazy-img-border-radius: 8px;
      --deckgo-lazy-img-height: 65px;
      --deckgo-lazy-img-width: 65px;
    }
    
    .slogan {
        font-size:15px;
        color:rgba(124,124,124,1);
        line-height:21px;
    }
    .login-box {
        width: 400px;
        height: 400px;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 19px 0px rgba(223,223,223,0.5);
        border-radius:5px;
    }
    
    .navigate-text {
        cursor: pointer;
    }
    
    .kun-logo-icon {
    }
`;

const HorseDownloadLogo: Component = () => {
  const navigate2Home = (): void => {
    // eslint-disable-next-line no-undef
    window.location.replace("/web/plume/moment");
  };

  return (
    <host shadowDom>
      <style>{style}</style>
      <div className="brand-item">
        <div className="kun-logo-icon">
          <kun-icon iconType="logo" width={65} height={65} />
        </div>
        <div className="right-side">
          <div className="logo-text">
            <div className="brand-name navigate-text" role="presentation" onclick={navigate2Home}>{CONST_SIX_CONFIG.name}</div>
          </div>
          <span className="slogan">{CONST_SIX_CONFIG.slogan}</span>
        </div>
      </div>
    </host>
  );
};

export default getComponentOrDefine("horse-download-box", HorseDownloadLogo);
