"use client"
import { useEffect, useId, useState } from "react";

export default function Home() {
  const id = useId()
  const [name, setName] = useState<string>('');

  useEffect(() => {
    if (typeof window !== "undefined" && window.localStorage) {
      let name = localStorage.getItem("name");
      console.log("Got name", name);
      setName(name);
    }
  }, []);

  function saveName(name: string) {
    setName(name);
    if (typeof window !== "undefined" && window.localStorage) {
      localStorage.setItem("name", name);
    }
  }

  return (
    <main className="flex" >
      <label htmlFor={id}>Name</label>
      <input id={id} value={name} onInput={e => saveName(e.target.value)}></input>
    </main>
  )
}