import { Button } from '@mui/material';
import { useMemoizedFn } from 'ahooks';
import { translate } from '@arcblock/ux/lib/Locale/util';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

import { translations } from '../../../libs/locales';
import { useUserFollowersContext } from '../../../../contexts/user-followers';

function Follow() {
  const { locale } = useLocaleContext();
  const t = useMemoizedFn((key, data = {}) => {
    return translate(translations, key, locale, 'en', data);
  });
  const { followed, followUser, unfollowUser } = useUserFollowersContext();

  return (
    <Button variant="contained" onClick={() => (followed ? unfollowUser() : followUser())} fullWidth>
      {followed ? t('profile.unfollow') : t('profile.follow')}
    </Button>
  );
}

export default Follow;
