import { useEffect } from "react";
import { Sparkles, Pause } from "lucide-react";
import { initReducedMotion, useReducedMotion } from "@/hooks/use-reduced-motion";

/** Accessibility toggle: pauses/simplifies homepage animations. */
export function MotionToggle({ className = "" }: { className?: string }) {
  const { reducedMotion, toggleReducedMotion } = useReducedMotion();

  useEffect(() => {
    initReducedMotion();
  }, []);

  return (
    <button
      type="button"
      onClick={toggleReducedMotion}
      aria-pressed={reducedMotion}
      title={reducedMotion ? "Enable animations" : "Reduce motion"}
      className={`inline-flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:border-primary/60 hover:text-foreground ${className}`}
    >
      {reducedMotion ? <Pause className="size-3.5" /> : <Sparkles className="size-3.5" />}
      <span className="hidden sm:inline">{reducedMotion ? "Motion off" : "Motion on"}</span>
    </button>
  );
}