import {motion} from 'motion/react';

interface GameCanvasOverlayLayerProps {
  escapeLead: number;
}

export function GameCanvasOverlayLayer({escapeLead}: GameCanvasOverlayLayerProps) {
  return (
    <>
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20" />
      {escapeLead > 0 && (
        <>
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background: `linear-gradient(90deg, rgba(80, 180, 255, ${0.05 + escapeLead * 0.12}) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.18) 100%)`,
            }}
          />
          <motion.div
            className="pointer-events-none absolute inset-x-0 top-4 text-center"
            animate={{opacity: [0.45, 0.95, 0.45], scale: [1, 1.03, 1]}}
            transition={{
              duration: Math.max(0.5, 1.1 - escapeLead * 0.4),
              repeat: Infinity,
              ease: 'easeInOut',
            }}
          >
            <span className="rounded-full border border-sky-300/30 bg-sky-950/65 px-3 py-1 text-[10px] font-bold tracking-[0.25em] text-sky-100">
              {escapeLead > 0.72 ? 'Escaped pursuit' : 'Creating distance'}
            </span>
          </motion.div>
        </>
      )}
    </>
  );
}