import clsx from "clsx";
import { m } from "framer-motion";
import { useRouter } from "next/router";

import { createVariant, fadeUpVariant } from "@/helpers/animation";
import type { PageType } from "@/types";

import styles from "./styles.module.scss";

interface PageLayoutProps {
  variant?: PageType;
  center?: boolean;
  children: React.ReactNode;
}

export default function PageLayout({
  variant = "primary",
  center,
  children,
}: PageLayoutProps) {
  const router = useRouter();

  if (variant === "primary") return children;

  return (
    <m.div
      key={router.pathname}
      className={clsx(styles.pageLayout, styles[variant], {
        [styles.center]: center,
      })}
      initial="initial"
      animate="animate"
      exit="exit"
      variants={createVariant(fadeUpVariant, { type: "spring" })}
    >
      {children}
    </m.div>
  );
}