import styles from "./FogOverlay.module.css";

interface FogOverlayProps {
  active: boolean;
  intensity: number; // 0–100
}

export default function FogOverlay({ active, intensity }: FogOverlayProps) {
  if (!active) return null;

  // Map 0–100 to 0.15–1.0 so fog is always at least faintly visible when active
  const opacity = 0.15 + (intensity / 100) * 0.85;

  return (
    <div className={styles.overlay} style={{ opacity }}>
      <div className={styles.layer1} />
      <div className={styles.layer2} />
      <div className={styles.layer3} />
    </div>
  );
}
