import type { ReactNode } from 'react';
import type { ErrorType } from './types';

import Box from '~/src/components/Box';
import LogoSongwhip from '~/src/components/Logos/LogoSongwhip';
import Page from '~/src/components/Page';
import PageMetadata from '~/src/components/PageMetadata';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import { useAppRouter } from '~/src/lib/router2';

const ErrorPage = () => {
  const { tx } = useI18n('error');
  const query = useAppRouter().getQuery();
  const errorType = query.type;

  const errorTitles: Record<ErrorType, string | ReactNode> = {
    presaveFailed: tx('presaveFailed.title'),
    presaveCanceled: tx('presaveCanceled.title'),
  };

  const errorMessages: Record<ErrorType, string | ReactNode> = {
    presaveFailed: tx('presaveFailed.message', { br: <br /> }),
    presaveCanceled: tx('presaveCanceled.message', { br: <br /> }),
  };

  const errorTitle = errorTitles[errorType] ?? tx('default.title');
  const errorMessage = errorMessages[errorType] ?? tx('default.message');

  return (
    <Page renderHeaderContent={() => <LogoSongwhip size="2.8rem" />}>
      <PageMetadata title={errorTitle} noIndex />
      <Box padding="6.4rem 3.2rem" centerContent minHeight="100vh">
        <Text centered size="2.4rem">
          {errorMessage}
        </Text>
      </Box>
    </Page>
  );
};

export default ErrorPage;