import { type FC } from 'react';

import type { AppError } from '~/lib/errors/types';
import type { PageErrorProps } from '../PageError';

import Page from '../Page';
import PageError from '../PageError';
import PageHeader from '../PageHeader';
import PageLoading from '../PageLoading';
import PageMetadata from '../PageMetadata';

interface PagePlaceholderProps {
  isLoading?: boolean | undefined;
  error?: AppError;
  withMenuButton?: boolean;
  toErrorText?: PageErrorProps['toText'];
}

const PagePlaceholder: FC<PagePlaceholderProps> = ({
  isLoading = false,
  withMenuButton,
  error,
  toErrorText,
}) => {
  return (
    <Page trackPageView={false}>
      <PageHeader withMenuButton={withMenuButton} />
      {isLoading && <PageLoading />}
      <PageMetadata title={error ? 'Error' : 'Loading …'} />
      {error && (
        <PageError testId="pageError" error={error} toText={toErrorText} />
      )}
    </Page>
  );
};

export default PagePlaceholder;