import { useState, useEffect } from 'react';
import { ArrowUp } from 'lucide-react';

type ScrollToTopButtonProps = {
  scrollContainer: React.RefObject<HTMLDivElement | null>;
};

export const ScrollToTopButton = ({ scrollContainer }: ScrollToTopButtonProps) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const el = scrollContainer.current;
    if (!el) return;
    const onScroll = () => setVisible(el.scrollTop > 200);
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, [scrollContainer]);

  if (!visible) return null;

  return (
    <button
      onClick={() => scrollContainer.current?.scrollTo({ top: 0, behavior: 'smooth' })}
      className="sticky bottom-4 float-right mr-4 z-10 p-2.5 rounded-full bg-duck-teal text-white shadow-lg hover:bg-duck-teal/90 active:scale-95 transition-all cursor-pointer"
      title="Scroll to top"
    >
      <ArrowUp className="h-4 w-4" />
    </button>
  );
};
