import { FunctionalComponent, h } from "atomico";
import style from "./kun-download-footer.css";
import "../kun-icon/kun-icon";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

// TODO download
const KunDownloadFooter: FunctionalComponent = () => (
  <host>
    <style>{style}</style>
    <div className="inline-flex justify-between container">
      <span className="min-w inline-flex items-center">
        <kun-icon title="logo" />
        <div className="flex flex-col py-2">
          <div className="font-medium">马上知识</div>
          <dix>体系化训练,学习更有趣</dix>
        </div>
      </span>
      <div className="flex items-center">
        <button type="button" className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
          打开
        </button>
      </div>
    </div>
  </host>
);

KunDownloadFooter.props = {
  message: {
    type: String,
    value: "kun-download-footer",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-download-footer", KunDownloadFooter);
