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

const KunTab = ({ selected: boolean, message: string }): FunctionalComponent => (
  <host shadowDom>
    <style>{style}</style>
    <span className={`title ${selected ? "selected" : ""}`}>
      {message}
    </span>
  </host>
);

KunTab.props = {
  selected: {
    type: Boolean,
    value: false,
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
  message: {
    type: String,
    value: "kun-loading",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-tab", KunTab);
