/**
 * InteractionModeToggle Component
 *
 * Toggle between Edit mode and Interact mode in constructor.
 */

import React from 'react';
import type { ConstructorInteractionMode } from './types';

interface InteractionModeToggleProps {
  mode: ConstructorInteractionMode;
  onModeChange: (mode: ConstructorInteractionMode) => void;
}

const InteractionModeToggle: React.FC<InteractionModeToggleProps> = ({
  mode,
  onModeChange,
}) => {
  const isEditMode = mode === 'edit';

  return (
    <div className='flex flex-wrap items-center gap-2'>
      <div className='inline-flex overflow-hidden rounded border border-gray-300 bg-white text-xs font-semibold'>
        <button
          type='button'
          className={`px-3 py-1.5 ${
            isEditMode
              ? 'bg-blue-600 text-white'
              : 'text-gray-700 hover:bg-gray-50'
          }`}
          onClick={() => onModeChange('edit')}
        >
          Edit mode
        </button>
        <button
          type='button'
          className={`border-l border-gray-300 px-3 py-1.5 ${
            !isEditMode
              ? 'bg-blue-600 text-white'
              : 'text-gray-700 hover:bg-gray-50'
          }`}
          onClick={() => onModeChange('interact')}
        >
          Interact mode
        </button>
      </div>
      <span className='text-[11px] text-gray-600'>
        {isEditMode
          ? 'Drag & configure elements.'
          : 'Click and interact with rendered elements.'}
      </span>
    </div>
  );
};

export default InteractionModeToggle;
