import { useDroppable } from '@dnd-kit/core';
import type { BeadSlot } from '../types';

interface BeadSlotViewProps {
  slot: BeadSlot;
  slotSize: number;
}

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

function BeadSlotView({ slot, slotSize }: BeadSlotViewProps) {
  const { setNodeRef, isOver } = useDroppable({
    id: `slot-${slot.index}`,
    data: { slotIndex: slot.index },
  });

  const isEmpty = slot.stone === null;
  const half = slotSize / 2;

  return (
    <div
      ref={setNodeRef}
      className="absolute"
      style={{
        left: slot.position.x - half,
        top: slot.position.y - half,
        width: slotSize,
        height: slotSize,
      }}
    >
      {isEmpty ? (
        <div
          className={`w-full h-full rounded-full border-2 border-dashed transition-colors ${
            isOver
              ? 'border-purple-400 bg-purple-400/30'
              : 'border-white/40 bg-white/5'
          }`}
        />
      ) : isColor(slot.stone!.image) ? (
        <div
          className={`w-full h-full rounded-full ring-2 transition-colors shadow-lg ${
            isOver ? 'ring-purple-400' : 'ring-white/60'
          }`}
          style={{ backgroundColor: slot.stone!.image }}
          title={slot.stone!.name}
        />
      ) : (
        <img
          src={slot.stone!.image}
          alt={slot.stone!.name}
          className={`w-full h-full rounded-full object-cover ring-2 transition-colors ${
            isOver ? 'ring-purple-400' : 'ring-white/60'
          }`}
        />
      )}
    </div>
  );
}

export default BeadSlotView;
