"use client";

import { SectionEditor } from "../_components/SectionEditor";
import { InputField, TextareaField } from "../_components/FormField";
import { ArrayEditor } from "../_components/ArrayEditor";

interface AboutData {
  title: string;
  paragraphs: string[];
}

export default function AboutEditorPage() {
  return (
    <SectionEditor<AboutData> sectionKey="about" title="О студии">
      {(data, update) => (
        <>
          <InputField
            label="Заголовок секции"
            value={data.title}
            onChange={(v) => update({ ...data, title: v })}
          />
          <ArrayEditor
            label="Параграфы"
            items={data.paragraphs}
            onChange={(paragraphs) => update({ ...data, paragraphs })}
            renderItem={(text, _i, updateItem) => (
              <TextareaField
                label={`Параграф`}
                value={text}
                onChange={updateItem}
                rows={3}
              />
            )}
            createItem={() => ""}
            addLabel="Добавить параграф"
          />
        </>
      )}
    </SectionEditor>
  );
}
