import { DynamicContentForm } from "./DynamicContentForm";
import type { ContentRecord } from "@/lib/contentFormUtils";

type HeroContentFormProps = {
  content: ContentRecord;
  onChange: (content: ContentRecord) => void;
};

/**
 * Hero editor: global fields first, then the interactive tabs repeater with full nested panel content.
 */
export function HeroContentForm({ content, onChange }: HeroContentFormProps) {
  const fieldLabels =
    typeof content.__fieldLabels === "object" && content.__fieldLabels !== null
      ? (content.__fieldLabels as Record<string, string>)
      : undefined;

  return (
    <div className="space-y-2">
      <DynamicContentForm
        content={content}
        onChange={onChange}
        excludeKeys={["tabs"]}
        fieldLabels={fieldLabels}
        reorderableArrays
      />

      <div className="rounded-xl border border-slate-300 bg-slate-50/80 p-4">
        <p className="text-sm font-semibold text-slate-900 mb-1">
          {fieldLabels?.tabs ?? "Interactive Tabs"}
        </p>
        <p className="text-xs text-slate-500 mb-4">
          Edit each clickable label around the hero image and all content shown when it is selected
          (traits, progress values, courses, links, and nested cards).
        </p>
        <DynamicContentForm
          content={{ tabs: Array.isArray(content.tabs) ? content.tabs : [] }}
          onChange={(patch) => onChange({ ...content, tabs: patch.tabs })}
          fieldLabels={fieldLabels}
          reorderableArrays
        />
      </div>
    </div>
  );
}