import {
  h, Component, useProp,
} from "atomico";
import "@caedman/gs/dist/global-style";
import style from "./kun-list-title.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunListTitle: Component = () => {
  const [kunTitle] = useProp("kunTitle");
  return (
    <host shadowDom>
      <style>{style}</style>
      <div className="divide-y divide-gray-400 page align-baseline">
        <div className="py-2 text-3xl my-8 flex flex-row justify-between">
          {kunTitle}
          <slot name="right" />
        </div>
        <div className=" py-2">
          <slot name="rang" />
        </div>
      </div>
      <global-style />
    </host>
  );
};

KunListTitle.props = {
  children: {
    type: Array,
  },
  kunTitle: {
    type: String,
  },
};

export default getComponentOrDefine("kun-list-title", KunListTitle);
