'use client';
import { FunctionComponent, PropsWithChildren } from 'react';
import Box from '@mui/material/Box';
import { usePathname } from '@/i18n/navigation';

/**
 * The one route/content-transition primitive for the app-wide motion pass: a calm 150–200ms fade +
 * small slide (the `bal-fade-in` keyframe in `globals.css`) that plays once when its subtree mounts.
 * Keyed on the locale-stripped pathname so React remounts (and replays the animation) on navigation,
 * but never on an in-place re-render (a refetch, a state update) — motion marks a *route change*, not
 * "data changed". The keyframe itself carries no reduced-motion branch; the single app-wide gate in
 * `globals.css` handles that for every consumer, this one included.
 * @component RouteFadeIn
 */
const RouteFadeIn: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const pathname = usePathname();
  return (
    <Box key={pathname} data-bal-route-fade sx={{ minWidth: 0 }}>
      {children}
    </Box>
  );
};

export default RouteFadeIn;
