import React, { memo } from 'react';
import { Button } from 'evergreen-ui';
import { useTranslation } from 'react-i18next';

import { withBlur } from '../util';
import useUserSettings from '../hooks/useUserSettings';


const PreserveMovDataButton = memo(() => {
  const { t } = useTranslation();
  const { preserveMovData, togglePreserveMovData } = useUserSettings();

  return (
    <Button height={20} onClick={withBlur(togglePreserveMovData)}>
      {preserveMovData ? t('Yes') : t('No')}
    </Button>
  );
});

export default PreserveMovDataButton;
