import { h, useProp } from "atomico";
import { GlobalConfig } from "@caedman/gs/dist/aync-hook";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const style = `
  .main {
    max-width: ${GlobalConfig.maxWidth}px;
  }
  
.footer {
    display: flex;
    width: 100%;
    line-height: 40px;
    padding: 0 20px;
    justify-content: space-between;
    background: #f2f2f5;
    color: #807c7c;
    border-top-style: solid;
    border-top-width: 1px;
}
`;
const KunWebsiteFooter = () => {
  const [content] = useProp<string>("content");
  const [beiAnHao] = useProp<string>("beiAnHao");

  const redirectBeiAn = (): void => {
    window.open("http://www.beian.miit.gov.cn/", "_blank");
  };

  const goToFeeBack = (): void => {
    window.open("http://thanks.wintercoming.xyz", "_blank");
  };

  return (
    <host>
      <style>{style}</style>
      <div className="footer h-16 flex items-center border-gray-400">
        <div class="flex mx-auto items-center main justify-between w-full">
          <div class="flex items-center">
            <span>{content}</span>
            <span class="cursor-pointer ml-4" onclick={goToFeeBack}>意见反馈</span>
          </div>
          <span>
            <span class="hover:opacity-75 cursor-pointer" onclick={redirectBeiAn}>
              {beiAnHao}
              {" "}
              深圳翼行客科技有限责任公司
            </span>
          </span>
        </div>
      </div>
      <global-style />
    </host>
  );
};

KunWebsiteFooter.props = {
  beiAnHao: {
    type: String,
    value: "粤 ICP备 18125092号-2",
    reflect: true,
  },
  content: {
    type: String,
    value: "马上训练营 @2020",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-website-footer", KunWebsiteFooter);
