// app/builder/[site]/page.tsx
"use client";

import { useEffect, useState } from "react";
import { templates } from "@/lib/template";
import { getUserSites, Site } from "@/lib/sites";

interface BuilderPageProps {
  params: { site: string };
}

export default function BuilderPage({ params }: BuilderPageProps) {
  const [site, setSite] = useState<Site | null>(null);

  useEffect(() => {
    const userSites = getUserSites();
    const found = userSites.find((s) => s.slug === params.site) || null;
    setSite(found);
  }, [params.site]);

  if (!site) return <div className="p-8 text-center">Loading...</div>;

  const Template = templates[site.template];
  const Header = Template.Header;
  const Footer = Template.Footer;
  const HomePage = Template.pages.Home;

  return (
    <>
      <Header />
      <HomePage siteData={site.data} />
      <Footer />
    </>
  );
}