"use client";

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

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

export default function AboutEditorPage() {
  return (
    <SectionEditor<AboutData> sectionKey="about" title="О студии" defaultData={{ paragraphs: [] }}>
      {(data, update) => (
        <>
          <InputField
            label="Заголовок секции"
            value={data.title}
            onChange={(v) => update({ ...data, title: v })}
          />
          <ArrayEditor
            label="Параграфы"
            items={data.paragraphs}
            onChange={(paragraphs) => update({ ...data, paragraphs })}
            inline
            renderItem={(text, _i, updateItem) => (
              <textarea
                value={text}
                onChange={(e) => updateItem(e.target.value)}
                rows={2}
                className="w-full rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-500 outline-none hover:border-gold/30 focus:border-gold transition-colors resize-none"
                placeholder="Текст параграфа..."
              />
            )}
            createItem={() => ""}
            addLabel="Добавить параграф"
          />
        </>
      )}
    </SectionEditor>
  );
}