// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React from 'react';

import { LeftPaneDialog } from './LeftPaneDialog';
import type { WidthBreakpoint } from './_util';
import type { LocalizerType } from '../types/I18N';
import { I18n } from './I18n';

export type PropsType = {
  containerWidthBreakpoint: WidthBreakpoint;
  i18n: LocalizerType;
};

const SUPPORT_PAGE =
  'https://support.signal.org/hc/articles/8997185514138-Re-connect-your-primary-device-to-continue-using-Signal-Desktop';

export function CriticalIdlePrimaryDeviceDialog({
  containerWidthBreakpoint,
  i18n,
}: PropsType): JSX.Element {
  const learnMoreLink = (parts: Array<string | JSX.Element>) => (
    <a href={SUPPORT_PAGE} rel="noreferrer" target="_blank">
      {parts}
    </a>
  );
  return (
    <LeftPaneDialog
      containerWidthBreakpoint={containerWidthBreakpoint}
      type="warning"
      title={i18n('icu:CriticalIdlePrimaryDevice__title')}
    >
      <I18n
        id="icu:CriticalIdlePrimaryDevice__body"
        i18n={i18n}
        components={{
          learnMoreLink,
        }}
      />
    </LeftPaneDialog>
  );
}
