import { useDraggable } from '@dnd-kit/core';
import type { Stone } from '../types';

interface StoneCardProps {
  stone: Stone;
}

function isColor(str: string) {
  return str.startsWith('#') || str.startsWith('rgb');
}

function StoneCard({ stone }: StoneCardProps) {
  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
    id: `stone-${stone.id}`,
    data: { stone },
  });

  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      className={`flex flex-col items-center gap-1 p-2 rounded-lg bg-white/10 cursor-grab active:cursor-grabbing transition-opacity ${
        isDragging ? 'opacity-50' : 'opacity-100'
      }`}
    >
      {isColor(stone.image) ? (
        <div
          className="w-12 h-12 rounded-full border-2 border-white/30 shadow-lg"
          style={{ backgroundColor: stone.image }}
          aria-label={stone.name}
        />
      ) : (
        <img
          src={stone.image}
          alt={stone.name}
          className="w-12 h-12 rounded-full object-cover"
        />
      )}
      <span className="text-xs text-white text-center">{stone.name}</span>
    </div>
  );
}

export default StoneCard;
