"use client";

import { TemplateDetailBreadcrumb } from "@/components/templates/TemplateDetailBreadcrumb";
import { TemplateDetailExamples } from "@/components/templates/TemplateDetailExamples";
import { TemplateDetailInfo } from "@/components/templates/TemplateDetailInfo";
import { TemplateDetailPreview } from "@/components/templates/TemplateDetailPreview";
import type { VideoCatalogTemplate } from "@/lib/video-templates-catalog";

interface TemplateDetailContentProps {
  template: VideoCatalogTemplate;
}

export function TemplateDetailContent({ template }: TemplateDetailContentProps) {
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 lg:px-8 lg:py-12">
      <TemplateDetailBreadcrumb templateName={template.name} />

      <div className="mt-6 grid gap-10 lg:grid-cols-[3fr_2fr] lg:items-start">
        <TemplateDetailPreview template={template} />
        <TemplateDetailInfo template={template} />
      </div>

      <TemplateDetailExamples templateId={template.id} />
    </div>
  );
}
