import Layout from "./_Layout.tsx";

const Counter = () => {
  const id = "counter";
  let state = 0;

  const Element = (
    <div id={id}>
      <span>`${state}`</span>
      <button>increment</button>
    </div>
  );

  Element.script = () => {
    const count = document.querySelector(`${id} > span`);
    const button = document.querySelector(`${id} > button`);
    button.addEventListener("click", () => {
      count.innerHTML = `${++state}`;
    });
  };

  return Element;
};

const Page = () => (
  <Layout>
    <h1 class="red">Hello world!</h1>
    <Counter />
    <p>Build date: ${new Date()}</p>
  </Layout>
);

Page.style = `
  .red {
    color: red;
  }
`;

export default Page;