"use client";

import { useEffect, useState } from "react";

export default function Home() {
  const [count, setCount] = useState<number | null>(null);

  useEffect(() => {
    fetch("http://localhost:8000/api/counter")
      .then((res) => res.json())
      .then((data) => setCount(data.value));
  }, []);

  const increment = async () => {
    const res = await fetch("http://localhost:8000/api/counter/increment", {
      method: "POST",
    });
    const data = await res.json();
    setCount(data.value);
  };

  return (
    <main style={{ padding: "2rem", fontFamily: "system-ui", textAlign: "center" }}>
      <h1 style={{ fontSize: "6rem", margin: "2rem 0" }}>
        {count === null ? "..." : count}
      </h1>
      <button
        onClick={increment}
        style={{
          fontSize: "1.5rem",
          padding: "1rem 2rem",
          cursor: "pointer",
        }}
      >
        +1
      </button>
    </main>
  );
}