import {
  h, c, useProp, Component,
} from "atomico";
import style from "./kun-ex-link.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { mockStyle } from "../../common/mock-style";

const KunExLink = () => {
  const [title] = useProp("title");
  const [url] = useProp("url");

  return (
    <host>
      <style>{mockStyle}</style>
      <div css="bg-gray-200 p-4">
        <a href={url} target="_blank">{title}</a>
        <div>{url}</div>
      </div>
    </host>
  ) as Component;
};

KunExLink.props = {
  title: {
    type: String,
    value: "dd",
    reflect: true,
  },
  url: {
    type: String,
    value: "dd",
    reflect: true,
  },
};

export default getComponentOrDefine("kun-ex-link", KunExLink);
