"use client";
import Link from "next/link";
import { getUserSites } from "@/lib/sites";

export default function Dashboard() {
  const userId = parseInt(localStorage.getItem("userId") || "0");
  if (typeof window === "undefined") return null; // SSR safe
  const userSites = getUserSites();

  const sites = userSites.filter((s) => s.userId === userId);

  return (
    <main className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">Your Sites</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {sites.map((site) => (
          <div
            key={site.id}
            className="border p-4 rounded shadow hover:shadow-lg"
          >
            <h2 className="text-xl font-semibold mb-2">{site.name}</h2>
            <p className="text-gray-600 mb-4">Template: {site.template}</p>
            <Link
              href={`/builder/${site.slug}`}
              className="text-blue-600 hover:underline"
            >
              Open Builder
            </Link>
          </div>
        ))}
      </div>
    </main>
  );
}