"use client";

import { motion, useReducedMotion } from "framer-motion";

const rainDrops = Array.from({ length: 12 }, (_, index) => ({
  left: `${(index * 43 + 7) % 101}%`,
  delay: (index % 9) * 0.18,
  duration: 1.1 + (index % 4) * 0.18,
}));

export function WeatherEffects({ precipitation10m, thunderstorm = false }: { precipitation10m?: number | null; thunderstorm?: boolean }) {
  const reduceMotion = useReducedMotion();
  const isRaining = (precipitation10m ?? 0) > 0;

  return (
    <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
      {isRaining && rainDrops.map((drop, index) => (
        <motion.span
          key={`rain-${index}`}
          initial={{ y: "-12vh", opacity: 0 }}
          animate={reduceMotion ? { opacity: 0.18 } : { y: ["-12vh", "115vh"], opacity: [0, 0.22, 0] }}
          transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
          className="absolute -top-8 h-10 w-px rotate-[8deg] rounded-full bg-foreground/35"
          style={{ left: drop.left }}
        />
      ))}
      {thunderstorm && (
        <motion.div
          animate={reduceMotion ? { opacity: 0.08 } : { opacity: [0, 0, 0.16, 0, 0.08, 0] }}
          transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
          className="absolute inset-0 bg-foreground"
        />
      )}
    </div>
  );
}