"use client";

import { useEffect, useState } from "react";
import dynamic from "next/dynamic";

const ScrollFlourishes = dynamic(() => import("@/components/scroll-flourishes"), {
  ssr: false,
});

/** Die dekorativen, aufwändigen Ranken sind nur auf größeren Displays sinnvoll. */
export default function DeferredScrollFlourishes() {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const query = window.matchMedia(
      "(min-width: 768px) and (prefers-reduced-motion: no-preference)",
    );
    const update = () => setEnabled(query.matches);

    update();
    query.addEventListener("change", update);
    return () => query.removeEventListener("change", update);
  }, []);

  return enabled ? <ScrollFlourishes /> : null;
}