"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { createUser } from "@/lib/users";

export default function Signup() {
  const router = useRouter();
  const [form, setForm] = useState({ name: "", email: "", businessName: "" });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const user = createUser(form);
    localStorage.setItem("userId", user.id.toString());
    router.push("/template-select");
  };

  return (
    <main className="container mx-auto p-8">
      <h1 className="text-2xl font-bold mb-6">Sign Up</h1>
      <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
        <input
          type="text"
          placeholder="Name"
          className="w-full border p-2 rounded"
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          required
        />
        <input
          type="email"
          placeholder="Email"
          className="w-full border p-2 rounded"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
          required
        />
        <input
          type="text"
          placeholder="Business Name"
          className="w-full border p-2 rounded"
          value={form.businessName}
          onChange={(e) => setForm({ ...form, businessName: e.target.value })}
          required
        />
        <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
          Next
        </button>
      </form>
    </main>
  );
}