import { useTranslation } from 'react-i18next';
import { LinkButton } from '@app/components/link-button/link-button';
import styles from './service-worker-message.module.scss';

export enum ServiceWorkerMessageType {
  OfflineReady = 'offlineReady',
  NeedRefresh = 'needRefresh',
}

export interface ServiceWorkerMessageProps {
  type: ServiceWorkerMessageType;
  onRefreshClick: () => void;
}

export function ServiceWorkerMessage({ type, onRefreshClick }: ServiceWorkerMessageProps) {
  const { t } = useTranslation();

  return (
    <>
      <span>{t(`components.serviceWorkerMessage.${type}`)}</span>

      {type === ServiceWorkerMessageType.NeedRefresh && (
        <LinkButton type="button" className={styles.updateButton} onClick={onRefreshClick}>
          {t('common.actions.update')}
        </LinkButton>
      )}
    </>
  );
}
