"use client";

import { usePathname } from 'next/navigation';
import { motion } from 'motion/react';

/**
 * Wrappt den Seiteninhalt der Tabs und spielt bei jedem Tab-Wechsel eine
 * dezente Einblend-Animation (Fade + leichtes Anheben). Der key={pathname}
 * sorgt dafuer, dass die Animation bei jedem Routenwechsel neu laeuft.
 */
export function TabTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <motion.div
      key={pathname}
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.25, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}