import { CSSProperties, FC, ReactNode } from "react";
import classNames from "classnames";
import { MotionWrapper } from "@/components/MotionWrapper/MotionWrapper";
import styles from "./PageItem.module.css";

type Props = {
    children: ReactNode;
    style?: CSSProperties;
    fullHeight?: boolean;
    fullHeightFixed?: boolean;
    noBorderRadius?: boolean;
    fullScreenMobile?: boolean;
};

const PageItem: FC<Props> = ({
    children,
    style,
    fullHeight = false,
    fullHeightFixed = false,
    noBorderRadius = false,
    fullScreenMobile = false,
}) => {
    const pageItemBody = (
        <div
            style={style}
            className={classNames(
                styles.container,
                fullHeight && styles["container-full-height"],
                fullHeightFixed && styles["container-full-height-fixed"],
                noBorderRadius && styles["container-no-border-radius"],
                fullScreenMobile && styles["container-full-screen-mobile"]
            )}>
            {children}
        </div>
    );

    return (
        <MotionWrapper
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.6 }}>
            {pageItemBody}
        </MotionWrapper>
    );
};
export default PageItem;