import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import type { RichTextProps } from '../../types';

export const RichText: ComponentConfig<RichTextProps> = {
  label: 'Rich Text',
  fields: {
    content: {
      type: 'textarea',
      label: 'Content',
    },
  },
  defaultProps: {
    content: 'Enter your text here...',
  },
  render: ({ content }) => {
    // Simple text rendering - content is stored as plain text
    // For production, this would use a structured JSON format and a safe renderer
    return (
      <div className="prose prose-lg dark:prose-invert max-w-none">
        <p className="text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
          {content}
        </p>
      </div>
    );
  },
};

export default RichText;
