import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

import Box from "@src/components/UI/Box";

import { Animation } from "./animation";

const SkeletonStyle = props => ({
  display: "flex",
  background: props.theme.colors.grey.neon,
  padding: props.theme.space.zero,
  borderRadius: props.circle ? "50%" : "2px",
  height: props.circle ? props.size : props.height,
  width: props.circle ? props.size : props.width,
});

const Skeleton = styled(Box)(SkeletonStyle, Animation);

Skeleton.propTypes = {
  animation: PropTypes.bool,
  circle: PropTypes.bool,
  height: PropTypes.string,
  width: PropTypes.string,
  size: PropTypes.string,
};

Skeleton.defaultProps = {
  animation: false,
  circle: false,
  height: "50px",
  width: "100px",
  size: "24px",
};

export default React.memo(Skeleton);
