"use client";

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

interface FAQData {
  title: string;
  items: { question: string; answer: string }[];
}

export default function FAQEditorPage() {
  return (
    <SectionEditor<FAQData> sectionKey="faq" title="FAQ">
      {(data, update) => (
        <>
          <InputField
            label="Заголовок секции"
            value={data.title}
            onChange={(v) => update({ ...data, title: v })}
          />
          <ArrayEditor
            label="Вопросы и ответы"
            items={data.items}
            onChange={(items) => update({ ...data, items })}
            renderItem={(item, _i, updateItem) => (
              <div className="space-y-3">
                <InputField
                  label="Вопрос"
                  value={item.question}
                  onChange={(v) => updateItem({ ...item, question: v })}
                />
                <TextareaField
                  label="Ответ"
                  value={item.answer}
                  onChange={(v) => updateItem({ ...item, answer: v })}
                  rows={3}
                />
              </div>
            )}
            createItem={() => ({ question: "", answer: "" })}
            addLabel="Добавить вопрос"
          />
        </>
      )}
    </SectionEditor>
  );
}