'use client';

import {motion} from 'framer-motion';

/**
 * Card hover: a 2px rise and a shadow step, 120ms.
 *
 * Deliberately restrained — on a dashboard where a dozen cards share a screen,
 * anything larger reads as the page twitching. <MotionConfig reducedMotion="user">
 * in providers.tsx already neutralises the transform for users who ask for it,
 * so there is no per-component guard here.
 */
export function HoverLift({
  children,
  isEnabled = true,
}: {
  children: React.ReactNode;
  isEnabled?: boolean;
}) {
  if (!isEnabled) return <>{children}</>;

  return (
    <motion.div
      whileHover={{y: -2}}
      transition={{duration: 0.12, ease: 'easeOut'}}
      style={{height: '100%'}}
    >
      {children}
    </motion.div>
  );
}
