import * as classNames from "classnames";
import * as _ from "lodash";
import * as React from "react";
import ContentLoader from "react-content-loader";

export enum PlaceholderType {
  Thumbnail,
}

export interface IPlaceholderProps {
  type: PlaceholderType;
  className?: string;
}

export const Placeholder = ({ type, className }: IPlaceholderProps) => (
  <div className={classNames("placeholder-container", {
    [className]: _.isString(className)
  })}>
    <div className={classNames("placeholder", {
      "placeholder--thumbnail": type === PlaceholderType.Thumbnail,
    })}>
      <ContentLoader ariaLabel="Loading content...">
        <rect x="0" y="0" />
      </ContentLoader>
    </div>
  </div>
);