import { Component, h, useEvent } from "atomico";
import style from "./kun-edit-tag.css";
import "../kun-icon-close/kun-icon-close";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunEditTag = ({ content }): Component => {
  const emitEvent = useEvent("DeleteTag", { bubbles: true, composed: true });
  const onDelete = (): void => {
    emitEvent({});
  };
  return (
    <host>
      <style>{style}</style>
      <span className="bg-gray-300 max-w-5 px-4 inline-flex flex items-center">
        {content}
        <kun-icon-close className="ml-2" onclick={onDelete} height={20} width={20} />
      </span>
    </host>
  );
};

KunEditTag.props = {
  onDeleteTag: {
    type: Function,
  },
  content: {
    type: String,
    value: "财经",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-edit-tag", KunEditTag);
