'use client';
import { FaArrowDown, FaArrowUp, FaEdit, FaTrashAlt } from 'react-icons/fa';
import { ComponentControlsProps, ControlButtonProps } from '@/src/types/builder';

export function ComponentControls({
  element,
  onElementSelect,
  onElementRemove,
  onElementMove,
  position = 'top-right',
  iconSize = 12,
  className,
}: ComponentControlsProps) {
  const isSection = element.layout.startsWith('section_');
  const isHeader = element.layout.startsWith('header_');
  const positionClasses = {
    'top-left': `left-0 ${iconSize === 12 ? '-top-1' : '-top-8'}`,
    'top-right': `right-0 ${iconSize === 12 ? '-top-[2px]' : '-top-8'}`,
    'bottom-left': `left-0 ${iconSize === 12 ? 'bottom-0' : '-bottom-8'}`,
    'bottom-right': `right-0 ${iconSize === 12 ? 'bottom-0' : '-bottom-8'}`,
  };

  return (
    <div
      className={`absolute ${positionClasses[position]} flex gap-1 opacity-0 ${isSection ? 'group-hover/section:opacity-100' : 'group-hover/item:opacity-100'} transition-opacity z-[350] ${className}`}
    >
      {!isHeader && (
        <>
          <ControlButton
            icon={FaArrowUp}
            onClick={() => onElementMove(element.id, 'up')}
            title='Move up'
            iconSize={iconSize}
          />
          <ControlButton
            icon={FaArrowDown}
            onClick={() => onElementMove(element.id, 'down')}
            title='Move down'
            iconSize={iconSize}
          />
        </>
      )}
      <ControlButton icon={FaEdit} onClick={() => onElementSelect(element)} title='Edit' iconSize={iconSize} />
      <ControlButton icon={FaTrashAlt} onClick={() => onElementRemove(element.id)} title='Remove' iconSize={iconSize} />
    </div>
  );
}

export function ControlButton({ icon: Icon, onClick, title, iconSize }: ControlButtonProps) {
  return (
    <button
      className={`bg-white rounded-t-sm border-2 border-neutral-400 shadow-sm text-neutral-700 hover:bg-neutral-100 p-1 ${iconSize === 12 ? 'rounded-b-sm !rounded-t-none' : ''}`}
      onClick={onClick}
      title={title}
    >
      <Icon size={iconSize} />
    </button>
  );
}
