import React from 'react';
import { useNode } from '@craftjs/core';

interface SpacerBlockProps {
  height?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
  className?: string;
}

export const SpacerBlock: React.FC<SpacerBlockProps> = ({
  height = 'md',
  className = ''
}) => {
  const { connectors: { connect, drag } } = useNode();

  const heightClasses = {
    xs: 'h-2',
    sm: 'h-4',
    md: 'h-8',
    lg: 'h-12',
    xl: 'h-16',
    '2xl': 'h-24',
    '3xl': 'h-32'
  };

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`${heightClasses[height]} ${className}`}
      style={{ minHeight: '0.5rem' }}
    >
      {/* Invisible spacer content for editor visibility */}
      <div className="h-full w-full border-2 border-dashed border-gray-300 opacity-20 flex items-center justify-center">
        <span className="text-xs text-gray-400">Spacer</span>
      </div>
    </div>
  );
};

SpacerBlock.craft = {
  displayName: 'Spacer Block',
  props: {
    height: 'md',
    className: ''
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Height
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="xs">Extra Small (0.5rem)</option>
            <option value="sm">Small (1rem)</option>
            <option value="md">Medium (2rem)</option>
            <option value="lg">Large (3rem)</option>
            <option value="xl">Extra Large (4rem)</option>
            <option value="2xl">2X Large (6rem)</option>
            <option value="3xl">3X Large (8rem)</option>
          </select>
        </div>
      </div>
    )
  }
};