import type { ReactNode } from 'react';
import type { ContentItem } from '../types';
import type { ContentViewItem } from '../store/contentModel';
import { RenderBasicElement } from './renderers';

export const RenderElement = ({
  element,
  dataItem,
  contentItem,
}: {
  element: ContentItem;
  dataItem?: Record<string, any>;
  contentItem?: ContentViewItem;
}): ReactNode => {
  if (!element || !contentItem) return null;
  if (!element.isVisible) return null;

  // Check if it's a form element
  const isFormElement = [
    'input',
    'select',
    'checkbox',
    'radio',
    'textarea',
    'submit',
  ].includes(element.elementType as string);

  if (isFormElement) {
    // Lazy load FormRenderer to avoid circular dependency
    const { FormRenderer } = require('../FormElements');
    return (
      <FormRenderer
        element={element as any}
        value=""
        onChange={() => {}}
        onSubmit={() => {}}
        contentItem={contentItem}
      />
    );
  }

  // Render basic elements using shared renderer
  return (
    <RenderBasicElement
      element={element}
      dataItem={dataItem}
      contentItem={contentItem}
    />
  );
};