import PropTypes from 'prop-types';

import translations from '../assets/locale';
import { useStateContext } from '../contexts/state';
import ActionButton from './action-button';

export default function BackButton({ onClick }) {
  const { locale } = useStateContext();
  const translation = translations[locale] || translations.en;
  return (
    <ActionButton
      onClick={onClick}
      sx={{
        color: 'text.secondary',
      }}>
      {translation.back}
    </ActionButton>
  );
}

BackButton.propTypes = {
  onClick: PropTypes.func.isRequired,
};