import React from 'react';
import Skeleton from 'react-loading-skeleton';

import classnames from 'classnames';
import './SegmentItemSkeleton.scss';
import '../SegmentItem/SegmentItem.scss';

export const SegmentItemSkeleton: React.FC<React.HTMLProps<HTMLDivElement>> = (props) => {
  const classNames = classnames('segment-container', props.className);

  return (
    <div className={classNames} data-testid="segment-list-item-skeleton">
      <div className="segment-contacts">
        <div className="segment-contacts__value" data-testid="contact-count">
          <Skeleton className="segment-contacts__skeleton-count" />
          <Skeleton className="segment-contacts__skeleton-subtitle" />
        </div>
      </div>
      <div className="segment-details">
        <Skeleton className="segment-details__skeleton-name" />
        <Skeleton className="segment-details__skeleton-subtitle" />
      </div>
    </div>
  );
};
