import React from 'react';

const GridCell = React.memo(({ active, mismatch, weight, variant, onClick }) => {
  if (variant === 'signal') {
    return (
      <button
        onClick={onClick}
        aria-label={active ? 'Active neuron' : 'Inactive neuron'}
        className={`w-full h-full transition-all duration-75 border ${
          active
            ? 'bg-[#00ff9f] border-white shadow-[0_0_15px_#00ff9f] scale-95'
            : 'bg-transparent border-[#00ff9f]/5 hover:border-[#00ff9f]/40 hover:bg-[#00ff9f]/5'
        }`}
      />
    );
  }

  // Memory variant
  const style = weight > 0.5
    ? { boxShadow: `0 0 ${weight * 20}px rgba(255,255,255,0.4)`, borderColor: `rgba(255,255,255,${weight})` }
    : { borderColor: `rgba(255,255,255,${weight})` };

  return (
    <div
      aria-label={active ? 'Remembered neuron' : 'Empty synapse'}
      style={style}
      className={`w-full h-full transition-all duration-300 border ${
        active
          ? 'bg-[#ff0055] shadow-[0_0_15px_#ff0055]'
          : 'bg-transparent border-[#ff0055]/5'
      } ${mismatch ? 'opacity-50 border-dotted scale-90' : ''}`}
    />
  );
});

GridCell.displayName = 'GridCell';

export default GridCell;