"use client";

import { useDroppable } from "@dnd-kit/core";
import { cn } from "@/lib/utils";

interface GridCellProps {
  x: number;
  y: number;
  cellSize: number;
  isOccupied: boolean;
  isDropTarget: boolean;
  isHovered: boolean;
  isInvalidDrop: boolean;
  isAttachDrop?: boolean;
}

export function GridCell({
  x,
  y,
  cellSize,
  isOccupied,
  isDropTarget,
  isHovered,
  isInvalidDrop,
  isAttachDrop = false,
}: GridCellProps) {
  const { setNodeRef } = useDroppable({
    id: `cell-${x}-${y}`,
    data: { x, y },
  });

  return (
    <div
      ref={setNodeRef}
      className={cn(
        "border border-border/60 transition-colors duration-75",
        isHovered && isAttachDrop && "bg-amber-400/30 border-amber-400/60",
        isHovered && !isAttachDrop && !isInvalidDrop && "bg-green-500/25 border-green-500/50",
        isHovered && !isAttachDrop && isInvalidDrop && "bg-red-500/25 border-red-500/50",
        !isHovered && isDropTarget && "bg-primary/5 border-primary/20",
      )}
      style={{ width: cellSize, height: cellSize }}
    />
  );
}