import { h, Component } from "atomico";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunPageTop: Component = (props: { kunTitle: string; kunMessage: string }) => (
  <host>
    <div className="mt-10 mb-6 mx-auto">
      <h1
        className="flex items-center font-size-lg"
      >
        {props.kunTitle}
      </h1>
      <div className="mt-0 mb-4 text-gray-600">
        {props.kunMessage}
      </div>
      <hr className="my-8 border-b-2 border-gray-200" />
    </div>
  </host>
);

KunPageTop.props = {
  kunTitle: {
    type: String,
    value: "title",
    reflect: true,
    event: {
      type: "changeTitle",
    },
  },
  kunMessage: {
    type: String,
    value: "kun-page-top",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-page-top", KunPageTop);
