import { useTranslation } from 'react-i18next';
import type { TFuncKey } from 'react-i18next';

import NavBar from '@/components/NavBar';
import usePlatform from '@/hooks/use-platform';

import { InlineNotification } from '../Notification';
import * as styles from './index.module.scss';

type Props = {
  title?: TFuncKey;
  description?: TFuncKey;
  titleProps?: Record<string, unknown>;
  descriptionProps?: Record<string, unknown>;
  notification?: TFuncKey;
  children: React.ReactNode;
};

const SecondaryPageWrapper = ({
  title,
  description,
  titleProps,
  descriptionProps,
  notification,
  children,
}: Props) => {
  const { t } = useTranslation();
  const { isMobile } = usePlatform();

  return (
    <div className={styles.wrapper}>
      <NavBar />
      {isMobile && notification && (
        <InlineNotification message={notification} className={styles.notification} />
      )}
      <div className={styles.container}>
        <div className={styles.header}>
          {title && <div className={styles.title}>{t(title, titleProps)}</div>}
          {description && (
            <div className={styles.description}>{t(description, descriptionProps)}</div>
          )}
        </div>

        {children}
      </div>
      {!isMobile && notification && (
        <InlineNotification message={notification} className={styles.notification} />
      )}
    </div>
  );
};

export default SecondaryPageWrapper;
