"use client";
import { useState, useEffect } from "react";
export default function ScrollToTop() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const onScroll = () => setVisible(window.scrollY > 400);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
if (!visible) return null;
return (
<button
type="button"
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
className="fixed bottom-6 right-6 z-40 rounded-full border border-[var(--border)] bg-[var(--card)] p-3 shadow-lg text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
aria-label="Back to top"
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
</svg>
</button>
);
}
