import type { FC } from 'react';
import React, { useCallback } from 'react';
import { Route } from 'react-router-dom';
import { PageContainer } from './pageContainer';
import type { RouteComponentProps, RouteProps } from 'react-router-dom';

export type PageRouteProps = RouteProps & {
    path: string;
    page: React.FC<RouteComponentProps>;
    className?: string;
};

export const PageRoute: FC<PageRouteProps> = ({ page, path, className, ...rest }) => {
    // We use a callback here to ensure the PageContainer is not unmounted
    // when this route is re-rendered. Without it, we would potentially send
    // a lot of false "page" Segment events.
    const component = useCallback(
        (props: RouteComponentProps) => (
            <PageContainer page={page} className={className} route={props} />
        ),
        [className, page]
    );

    return <Route {...rest} key={path} path={path} component={component} />;
};