import type { ComponentConfig } from '@reacteditor/core';
import { CircleHelp } from 'lucide-react';
import Faq, { type FaqProps } from './faq';

const faqConfig: ComponentConfig<FaqProps> = {
  label: 'FAQ', icon: <CircleHelp size={16} />, category: 'content',
  defaultProps: {
    heading: 'Get answers to frequently asked questions.', description: '',
    items: [
      { question: 'What does your business offer?', answer: 'Use this space to provide a clear, concise answer to a common customer question.' },
      { question: 'Who is this for?', answer: 'Describe the people, teams, or organizations that will benefit most from your offer.' },
      { question: 'How do I get started?', answer: 'Explain the simplest next step and what customers can expect after they begin.' },
      { question: 'Where can I learn more?', answer: 'Point visitors toward your contact page, documentation, or another helpful resource.' },
    ],
  },
  fields: {
    heading: { label: 'Heading', type: 'textarea', contentEditable: true }, description: { label: 'Description', type: 'textarea', contentEditable: true },
    items: { label: 'Questions', type: 'array', defaultItemProps: { question: 'Question', answer: 'Answer' }, getItemSummary: (item) => item?.question || 'Question', arrayFields: { question: { label: 'Question', type: 'text', contentEditable: true }, answer: { label: 'Answer', type: 'textarea', contentEditable: true } } },
  },
  render: (props) => <Faq {...props} />,
};

export default faqConfig;