import React from 'react';

import { randomIntFromInterval, generateText } from '../utils';

import PlaceholderAvatar from './placeholder-avatar';
import PlaceholderDisplayName from './placeholder-display-name';

/** Fake chat to display while data is loading. */
const PlaceholderChat: React.FC = () => {
  const messageLength = randomIntFromInterval(5, 75);

  return (
    <div className='chat-list-item chat-list-item--placeholder'>
      <div className='account'>
        <div className='account__wrapper'>
          <div className='account__display-name'>
            <div className='account__avatar-wrapper'>
              <PlaceholderAvatar size={36} />
            </div>
            <PlaceholderDisplayName minLength={3} maxLength={25} />
            <span className='chat__last-message'>
              {generateText(messageLength)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PlaceholderChat;