import { Component, h, useProp } from "atomico";
import style from "./kun-article-list.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

interface ArticleItem {
  url: string;
   title: string;
}

const KunArticle = ({ message }): Component => {
  const [list] = useProp<ArticleItem[]>("posts");
  const openLink = (url: string): void => {
    window.open(url, "_blank");
  };
  return (
    <host>
      <style>{style}</style>
      <div class="max-w-sm rounded overflow-hidden shadow-lg">
        <div className="title">{message ?? "dd"}</div>
        {
        list.map((item) => (
          <div
            role="presentation"
            key={item.title}
            className="item transition cursor-pointer duration-500 ease-in-out hover:bg-gray-200 transform"
            onclick={() => openLink(item.url)}
          >
            {item.title }
          </div>
        ))
      }
      </div>
    </host>
  );
};

KunArticle.props = {
  posts: {
    type: Array,
    value: [{
      title: "a",
      url: "http",
    }],
  },
  message: {
    type: String,
    value: "kun-article-list",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-article-list", KunArticle);
