import type { MapOption } from "../types";

interface MapCardProps {
  card: MapOption;
  index: number;
  isSubmitted: boolean;
  isSelected: boolean;
  onDragStart: (index: number) => void;
  onDragEnter: (index: number) => void;
  onDragEnd: () => void;
  onTouchStart: (index: number) => void;
  onTouchMove: (e: React.TouchEvent) => void;
  onTouchEnd: () => void;
  onClick: (index: number) => void;
}

export default function MapCard({
  card,
  index,
  isSubmitted,
  isSelected,
  onDragStart,
  onDragEnter,
  onDragEnd,
  onTouchStart,
  onTouchMove,
  onTouchEnd,
  onClick,
}: MapCardProps) {
  return (
    <div
      data-card-index={index}
      className={`bg-white dark:bg-gray-600 rounded-lg shadow-lg p-4 flex flex-col items-center transition-all duration-200 ${
        isSubmitted
          ? "cursor-default opacity-90"
          : "cursor-pointer touch-manipulation hover:shadow-xl"
      } ${
        isSelected
          ? "ring-4 ring-blue-500"
          : !isSubmitted && "hover:scale-105"
      }`}
      draggable={!isSubmitted}
      onDragStart={() => onDragStart(index)}
      onDragEnter={() => onDragEnter(index)}
      onDragEnd={onDragEnd}
      onDragOver={(e) => e.preventDefault()}
      onTouchStart={() => onTouchStart(index)}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
      onClick={() => onClick(index)}
    >
      <div className="relative w-full">
        {isSubmitted && (
          <div className="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full font-bold z-10">
            #{index + 1}
          </div>
        )}
        <img
          src={card.img}
          alt={card.name}
          className="w-full h-32 sm:h-40 object-cover rounded mb-2"
        />
      </div>
      <span className="font-semibold text-sm sm:text-base text-center break-words">
        {card.name}
      </span>
      {isSelected && !isSubmitted && (
        <div className="mt-2 px-2 py-1 bg-blue-500 text-white text-xs rounded-full">
          Selected
        </div>
      )}
    </div>
  );
}
