import React from 'react';
import { useElementDrag } from './hooks/useElementDrag';
import { useElementSelection } from './hooks/useElementSelection';
import { getElementStyle } from './utils/elementUtils';
import './elements.css';

function SymbolElement({
  element,
  isSelected,
  onSelect,
  onDelete,
  onDragStart,
  onDrag,
  charWidth,
  charHeight,
  toolMode
}) {
  // Use custom hooks for drag and selection
  const { isDragging, handleMouseDown: handleDragMouseDown } = useElementDrag({
    isSelected,
    onDragStart,
    onDrag,
    toolMode
  });

  const { handleClick } = useElementSelection({
    isSelected,
    onSelect,
    onDelete,
    toolMode
  });

  const handleMouseDown = (e) => {
    onSelect(e); // Select element before dragging
    handleDragMouseDown(e, element.id);
  };

  // Use element class method for style calculation
  const style = getElementStyle(element, charWidth, charHeight);

  return (
    <div
      className={`symbol-element ${isSelected ? 'selected' : ''} ${isDragging ? 'dragging' : ''}`}
      style={style}
      onClick={handleClick}
      onMouseDown={handleMouseDown}
    >
      {element.char}
    </div>
  );
}

export default SymbolElement;