import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

export default function SortableFeatureCard({ feature, index, onRemove }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: feature.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const getComplexityColor = (complexity) => {
    switch (complexity) {
      case 'low': return 'bg-green-100 text-green-800 border-green-200';
      case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'high': return 'bg-red-100 text-red-800 border-red-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getTypeIcon = (type) => {
    switch (type) {
      case 'essential': return '⭐';
      case 'suggested': return '💡';
      case 'custom': return '🎨';
      default: return '📦';
    }
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`bg-white rounded-lg border border-gray-200 p-4 shadow-sm transition-all ${
        isDragging ? 'opacity-50 shadow-lg' : 'hover:shadow-md'
      }`}
    >
      <div className="flex items-start space-x-3">
        {/* Drag Handle */}
        <div
          {...attributes}
          {...listeners}
          className="flex-shrink-0 w-8 h-8 bg-gray-100 rounded-md flex items-center justify-center cursor-grab hover:bg-gray-200 transition-colors"
        >
          <span className="text-gray-600 font-bold text-sm">{index}</span>
        </div>

        {/* Feature Content */}
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <div className="flex items-center space-x-2 mb-1">
                <span className="text-lg">{getTypeIcon(feature.type)}</span>
                <h4 className="font-medium text-gray-900 truncate">
                  {feature.name}
                </h4>
              </div>
              <p className="text-sm text-gray-600 mb-2">
                {feature.description}
              </p>
              <div className="flex items-center space-x-2">
                <span className={`px-2 py-1 rounded-full text-xs font-medium border ${getComplexityColor(feature.complexity)}`}>
                  {feature.complexity} complexity
                </span>
                <span className="text-xs text-gray-500 capitalize">
                  {feature.type}
                </span>
              </div>
            </div>

            {/* Remove Button */}
            <button
              onClick={onRemove}
              className="flex-shrink-0 w-6 h-6 bg-red-100 text-red-600 rounded-full hover:bg-red-200 transition-colors flex items-center justify-center"
              title="Remove feature"
            >
              <span className="text-sm">×</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
