import React, { ReactNode } from 'react';
import { Box } from '@chakra-ui/react';

interface EditableElementProps {
  elementName: string;
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

/**
 * Wrapper component that marks an element as editable in the visual editor
 */
const EditableElement: React.FC<EditableElementProps> = ({ 
  elementName, 
  children, 
  className,
  style 
}) => {
  return (
    <Box
      data-element={elementName}
      className={className}
      style={style}
      position="relative"
    >
      {children}
    </Box>
  );
};

export default EditableElement;
