import React from 'react';
import { FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';

import AvatarOverlay from 'soapbox/components/avatar_overlay';
import DisplayName from 'soapbox/components/display-name';
import Icon from 'soapbox/components/icon';

import type { Account as AccountEntity } from 'soapbox/types/entities';

interface IMovedNote {
  from: AccountEntity,
  to: AccountEntity,
}

const MovedNote: React.FC<IMovedNote> = ({ from, to }) => {
  const displayNameHtml = { __html: from.display_name_html };

  return (
    <div className='account__moved-note'>
      <div className='account__moved-note__message'>
        <div className='account__moved-note__icon-wrapper'><Icon src={require('feather-icons/dist/icons/briefcase.svg')} className='account__moved-note__icon' fixedWidth /></div>
        <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
      </div>

      <NavLink to={`/@${to.acct}`} className='detailed-status__display-name'>
        <div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div>
        <DisplayName account={to} />
      </NavLink>
    </div>
  );
};

export default MovedNote;