import type { ComponentConfig } from '@reacteditor/core';
import { Mail } from 'lucide-react';
import ContactForm, { type ContactFormProps } from './contact-form';

const contactFormConfig: ComponentConfig<ContactFormProps> = {
  label: 'Contact form', icon: <Mail size={16} />, category: 'conversion',
  defaultProps: {
    heading: 'Let’s make something meaningful.', description: 'Tell us what you are working on, where you are stuck, or what you want to make possible.', email: 'hello@example.com', location: 'New York, NY',
    nameLabel: 'Name', emailLabel: 'Email', companyLabel: 'Company', messageLabel: 'How can we help?', submitLabel: 'Send message', successMessage: 'Thanks — we will be in touch soon.',
  },
  fields: {
    heading: { label: 'Heading', type: 'textarea', contentEditable: true }, description: { label: 'Description', type: 'textarea', contentEditable: true },
    email: { label: 'Contact email', type: 'text', contentEditable: true }, location: { label: 'Location', type: 'text', contentEditable: true },
    nameLabel: { label: 'Name field label', type: 'text' }, emailLabel: { label: 'Email field label', type: 'text' }, companyLabel: { label: 'Company field label', type: 'text' }, messageLabel: { label: 'Message field label', type: 'text' }, submitLabel: { label: 'Submit label', type: 'text', contentEditable: true }, successMessage: { label: 'Success message', type: 'text' },
  },
  render: (props) => <ContactForm {...props} />,
};

export default contactFormConfig;