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

interface TwoColumnLayoutProps {
  leftWidth?: '1/3' | '1/2' | '2/3';
  gap?: 'sm' | 'md' | 'lg' | 'xl';
  className?: string;
}

export const TwoColumnLayout: React.FC<TwoColumnLayoutProps> = ({
  leftWidth = '1/2',
  gap = 'md',
  className = ''
}) => {
  const { connectors: { connect, drag } } = useNode();

  const leftWidthClasses = {
    '1/3': 'w-1/3',
    '1/2': 'w-1/2',
    '2/3': 'w-2/3'
  };

  const rightWidthClasses = {
    '1/3': 'w-2/3',
    '1/2': 'w-1/2',
    '2/3': 'w-1/3'
  };

  const gapClasses = {
    sm: 'gap-2',
    md: 'gap-4',
    lg: 'gap-6',
    xl: 'gap-8'
  };

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`flex flex-col lg:flex-row ${gapClasses[gap]} ${className}`}
    >
      {/* Left Column */}
      <div className={`${leftWidthClasses[leftWidth]} min-h-24`}>
        <Element
          id="left-column"
          is="div"
          canvas
          className="w-full h-full p-2 border-2 border-dashed border-gray-300 rounded-lg"
        >
          <div className="text-center text-gray-400 text-sm py-4">
            Drop components here
          </div>
        </Element>
      </div>

      {/* Right Column */}
      <div className={`${rightWidthClasses[leftWidth]} min-h-24`}>
        <Element
          id="right-column"
          is="div"
          canvas
          className="w-full h-full p-2 border-2 border-dashed border-gray-300 rounded-lg"
        >
          <div className="text-center text-gray-400 text-sm py-4">
            Drop components here
          </div>
        </Element>
      </div>
    </div>
  );
};

TwoColumnLayout.craft = {
  displayName: 'Two Column Layout',
  props: {
    leftWidth: '1/2',
    gap: 'md',
    className: ''
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Left Column Width
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="1/3">One Third</option>
            <option value="1/2">Half</option>
            <option value="2/3">Two Thirds</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Column Gap
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="sm">Small</option>
            <option value="md">Medium</option>
            <option value="lg">Large</option>
            <option value="xl">Extra Large</option>
          </select>
        </div>
      </div>
    )
  }
};