import { AngleUpIcon } from '@/components/icons';

interface ScrollToTopProps {
  isShowScrollToTop: boolean;
}

const handleScrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};

export const ScrollToTop = ({ isShowScrollToTop }: ScrollToTopProps) => {
  return (
    <button
      id="scrollToTop"
      aria-label="Scroll to top"
      className={`fixed bottom-5 right-7 z-50 p-4 group hover:bg-accent rounded-full bg-sidebar/70 transition-all duration-500 ease-in-out ${
        isShowScrollToTop
          ? 'transform-none opacity-100'
          : 'opacity-0 translate-y-full'
      } `}
      onClick={handleScrollToTop}
    >
      <AngleUpIcon className="text-accent group-hover:text-sidebar transition-colors duration-300 ease-in-out" />
    </button>
  );
};