import { Component, h } from "atomico";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { useAsyncHook } from "../../hooks/use-async-hook/use-async-hook";

const HelloWorld: Component = () => {
  // const [value, setValue] = useProp<number>("message");
  useAsyncHook(() => new Promise((r) => {
    r(1);
  }), []);
  const a1 = "aa1111111111111111";
  return (
    <host>
      <div>
        <input
          className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
          type="email"
          placeholder="jane@example.com"
        />
        <h1>
          {a1}
        </h1>
      </div>
    </host>
  );
};

HelloWorld.props = {
  message: {
    type: String,
    value: "hello-world0011",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("hello-world", HelloWorld);
