import React from 'react';

// Fix #4: Memoized grid cell — only re-renders when its own visual state changes
const GridCell = React.memo(({ cellClass, isObstacle, isHighCost, isStart, isEnd, tooltipContent }) => {
  const inner = (
    <div
      className={`w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 rounded-md border flex items-center justify-center text-[10px] font-mono transition-all duration-300 ${cellClass}`}
      role="gridcell"
    >
      {isObstacle && !isStart && !isEnd && (
        <div className="w-1.5 h-1.5 rounded-full bg-slate-700" />
      )}
      {isHighCost && !isStart && !isEnd && (
        <div className="w-1 h-1 rounded-full bg-slate-800/50" />
      )}
    </div>
  );

  if (!tooltipContent) return inner;

  return (
    <div className="group relative flex flex-col items-center">
      {inner}
      <div className="absolute bottom-full mb-2 hidden flex-col items-center group-hover:flex z-50 pointer-events-none">
        <div className="relative z-10 p-2 text-xs leading-none text-slate-200 whitespace-nowrap bg-slate-800 border border-slate-700 shadow-xl rounded-md flex flex-col gap-1 min-w-[120px]">
          {tooltipContent}
        </div>
        <div className="w-3 h-3 -mt-2 rotate-45 bg-slate-800 border-r border-b border-slate-700" />
      </div>
    </div>
  );
});

GridCell.displayName = 'GridCell';
export default GridCell;