import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import styled from "styled-components";

const PageContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  opacity: ${(props) => (props.isVisible ? 1 : 0)};
  transform: ${(props) => (props.isVisible ? "translateY(0)" : "translateY(10px)")};
  transition: opacity 0.3s ease, transform 0.3s ease;
`;

const TransitionWrapper = ({ children }) => {
  const location = useLocation();
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    setIsVisible(false); // Trigger fade-out animation
    const timer = setTimeout(() => setIsVisible(true), 300); // Match animation duration
    return () => clearTimeout(timer);
  }, [location]);

  return <PageContainer isVisible={isVisible}>{children}</PageContainer>;
};

export default TransitionWrapper;