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

const KunDownloadGuide = ({ slogan, productTitle }): Component => (
  <host>
    <style>{style}</style>
    <div className="container flex flex-row items-center w-full justify-around">
      <kun-icon iconType="logo" iconWidth={100} iconHeight={100} />
      <div class="flex flex-col ml-2">
        <div className="my-2  text-xl font-medium">{productTitle}</div>
        <div className="mb-2">{slogan}</div>
        <button type="button" className="mt-bg-transparent text-sm outline-none hover:bg-orange-500 text-orange-500 font-semibold hover:text-white py-2 px-4 border border-orange-500 hover:border-transparent rounded">下载安装</button>
      </div>
    </div>
  </host>
);

KunDownloadGuide.props = {
  productTitle: {
    type: String,
    value: "马上知识",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
  slogan: {
    type: String,
    value: "训练营",
    reflect: true,
    event: {
      type: "changeSlogan",
    },
  },
  message: {
    type: String,
    value: "kun-download-guide",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-download-guide", KunDownloadGuide);
