import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
import { ProductStudioClient } from "@/components/product-studio-client"
import { useProductDashboardHref } from "@/contexts/product-route-sync"

/**
 * Builder workspace for deterministic product creation. Mirrors the
 * `SettingsOrganizationClient` shell so chrome (template, max-width, padding,
 * `SiteHeader` title) is consistent with every other settings-tier page.
 */
export default function ProductStudioPage() {
  const dashboardHref = useProductDashboardHref()

  return (
    <PrimaryPageTemplate
      maxWidthClassName="max-w-3xl"
      contentClassName="px-8 pt-10 pb-32"
      siteHeader={{
        breadcrumbs: [{ label: "Dashboard", href: dashboardHref }],
        title: "Product Studio",
      }}
    >
      <ProductStudioClient />
    </PrimaryPageTemplate>
  )
}
