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

interface ButtonBlockProps {
  text?: string;
  href?: string;
  target?: '_self' | '_blank';
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  fullWidth?: boolean;
  className?: string;
}

export const ButtonBlock: React.FC<ButtonBlockProps> = ({
  text = 'Button Text',
  href = '#',
  target = '_self',
  variant = 'primary',
  size = 'md',
  fullWidth = false,
  className = ''
}) => {
  const { connectors: { connect, drag } } = useNode();

  const variantClasses = {
    primary: 'bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700',
    secondary: 'bg-gradient-to-r from-slate-500 to-slate-600 text-white hover:from-slate-600 hover:to-slate-700',
    outline: 'border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white',
    ghost: 'text-blue-500 hover:bg-blue-50'
  };

  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };

  const widthClass = fullWidth ? 'w-full' : 'w-auto';

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`p-2 ${className}`}
    >
      <a
        href={href}
        target={target}
        className={`
          inline-flex items-center justify-center
          font-medium rounded-lg
          transition-all duration-200
          shadow-lg hover:shadow-xl
          ${variantClasses[variant]}
          ${sizeClasses[size]}
          ${widthClass}
        `}
      >
        {text}
      </a>
    </div>
  );
};

ButtonBlock.craft = {
  displayName: 'Button Block',
  props: {
    text: 'Button Text',
    href: '#',
    target: '_self',
    variant: 'primary',
    size: 'md',
    fullWidth: false,
    className: ''
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Button Text
          </label>
          <input
            type="text"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="Button Text"
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Link URL
          </label>
          <input
            type="url"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="https://..."
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Target
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="_self">Same Window</option>
            <option value="_blank">New Window</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Variant
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="primary">Primary</option>
            <option value="secondary">Secondary</option>
            <option value="outline">Outline</option>
            <option value="ghost">Ghost</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Size
          </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>
          </select>
        </div>
        
        <div>
          <label className="flex items-center">
            <input type="checkbox" className="mr-2" />
            Full Width
          </label>
        </div>
      </div>
    )
  }
};