'use client';

import { useCallback } from 'react';
import { useRouter } from 'next/navigation';

interface PageTransitionProps {
  children: React.ReactNode;
  href: string;
  className?: string;
}

export function PageTransition({ children, href, className }: PageTransitionProps) {
  const router = useRouter();

  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
    router.push(href);
  }, [href, router]);

  return (
    <div onClick={handleClick} className={`inline-block cursor-pointer ${className || ''}`}>
      {children}
    </div>
  );
}