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

const KunCardItem = ({ content }): Component => (
  <host shadowDom>
    <style>{style}</style>
    <div className="flex flex-col">
      <div>
        {content}
      </div>
      <div className="flex justify-between" />
    </div>
  </host>
);

KunCardItem.props = {
  message: {
    type: String,
    value: "kun-card-item",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-card-item", KunCardItem);
