import React from 'react';
import AntdSkeleton from 'antd/es/skeleton';

import { getPrefixCls } from '../config-provider';
import './index.less';

const Skeleton = props => {
  const { prefixCls: customizePrefixCls, ...restProps } = props;
  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
  return <AntdSkeleton {...restProps} prefixCls={prefixCls} />;
};

const SkeletonButton = props => {
  const { prefixCls: customizePrefixCls, ...restProps } = props;
  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
  return <AntdSkeleton.Button {...restProps} prefixCls={prefixCls} />;
};

const SkeletonAvatar = props => {
  const { prefixCls: customizePrefixCls, ...restProps } = props;
  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
  return <AntdSkeleton.Avatar {...restProps} prefixCls={prefixCls} />;
};

const SkeletonInput = props => {
  const { prefixCls: customizePrefixCls, ...restProps } = props;
  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
  return <AntdSkeleton.Input {...restProps} prefixCls={prefixCls} />;
};

const SkeletonImage = props => {
  const { prefixCls: customizePrefixCls, ...restProps } = props;
  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
  return <AntdSkeleton.Image {...restProps} prefixCls={prefixCls} />;
};

Skeleton.Button = SkeletonButton;
Skeleton.Avatar = SkeletonAvatar;
Skeleton.Input = SkeletonInput;
Skeleton.Image = SkeletonImage;

export default Skeleton;