import React from "react";

interface MaskLayerProps {
  maskUrl: string;
  color: string;
  onMouseEnter: (maskUrl: string) => void;
  onClick: (maskUrl: string) => void;
}

/**
 * Componente para renderizar una única capa de máscara.
 * Usa React.memo para evitar re-renderizados si las props no cambian.
 */
const MaskLayer = React.memo(function MaskLayer({
  maskUrl,
  color,
  onMouseEnter,
  onClick,
}: MaskLayerProps) {
  // Creamos los manejadores de eventos aquí para pasar la URL de la máscara.
  // Como el componente está memoizado, estas funciones solo se recrean si las props cambian.
  const handleMouseEnter = () => onMouseEnter(maskUrl);
  const handleClick = () => onClick(maskUrl);

  return (
    <div
      className="absolute top-0 left-0 w-full h-full transition-opacity duration-200"
      style={{
        backgroundColor: color,
        maskImage: `url(${maskUrl})`,
        WebkitMaskImage: `url(${maskUrl})`,
        maskSize: "contain",
        WebkitMaskSize: "contain",
        maskRepeat: "no-repeat",
        WebkitMaskRepeat: "no-repeat",
        maskPosition: "center",
        WebkitMaskPosition: "center",
      }}
      onMouseEnter={handleMouseEnter}
      onClick={handleClick}
    />
  );
});

export default MaskLayer;