// AnimatedRoutes.jsx
import React from "react";
import { Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence, LayoutGroup } from "framer-motion";
import Departments from "./Departments";
import DepartmentDetail from "./DepartmentDetail";

export default function AnimatedRoutes() {
  const location = useLocation();

  return (
    <LayoutGroup>
      <AnimatePresence mode="wait">
        {/* key مهم حتى يعمل خروج/دخول الصفحة مع الانتقال */}
        <Routes location={location} key={location.pathname}>
          <Route path="/" element={<Departments />} />
          <Route path="/departments/1" element={<DepartmentDetail />} />
        </Routes>
      </AnimatePresence>
    </LayoutGroup>
  );
}
