"use client";

import { Lenis } from "lenis/react";
import { useEffect, useState } from "react";

export function SmoothScroll() {
	const [prefersReduced, setPrefersReduced] = useState(true);

	useEffect(() => {
		const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
		setPrefersReduced(mq.matches);
		const onChange = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
		mq.addEventListener("change", onChange);
		return () => mq.removeEventListener("change", onChange);
	}, []);

	if (prefersReduced) return null;

	return (
		<Lenis
			root
			options={{
				duration: 1.2,
				lerp: 0.1,
				smoothWheel: true,
				wheelMultiplier: 1,
			}}
		/>
	);
}