import React from 'react';
import { Placeholder, Segment } from 'semantic-ui-react';

const ContactsLoader = ({ isDarkMode }) => {
  return (
    <div>
      {Array.from(new Array(3)).map((_, i) => (
        <Segment key={i} raised inverted={isDarkMode}>
          <Placeholder fluid inverted={isDarkMode}>
            <Placeholder.Header image>
              <Placeholder.Line />
              <Placeholder.Line />
            </Placeholder.Header>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
          </Placeholder>
        </Segment>
      ))}
    </div>
  );
};

export default ContactsLoader;