"use client";
import { useRouter } from "next/navigation";
import { createSite, Site } from "@/lib/sites";
import { useState } from "react";

export default function TemplateSelect() {
  const router = useRouter();
  const userId = parseInt(localStorage.getItem("userId") || "0");
  const templates = ["template1"];
  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);

  const handleSelect = () => {
    if (!selectedTemplate) return;
    const site = createSite({
      userId,
      businessName: "My Business",
      template: selectedTemplate,
    });
    router.push(`/dashboard`);
  };

  return (
    <main className="container mx-auto p-8">
      <h1 className="text-2xl font-bold mb-6">Select a Template</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {templates.map((t) => (
          <div
            key={t}
            onClick={() => setSelectedTemplate(t)}
            className={`border p-4 rounded shadow cursor-pointer hover:shadow-lg transition ${
              selectedTemplate === t ? "border-blue-600" : ""
            }`}
          >
            <h2 className="font-semibold mb-2">{t}</h2>
            <div className="h-40 bg-gray-100 flex items-center justify-center">
              Preview
            </div>
          </div>
        ))}
      </div>
      <button
        onClick={handleSelect}
        className="mt-6 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
      >
        Create Site
      </button>
    </main>
  );
}