import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "../styled-jsx.es.js";
/* "use client" */

import React, { useState } from 'react';
var Skeleton = function Skeleton(_ref) {
  var width = _ref.width,
    height = _ref.height,
    shape = _ref.shape,
    style = _ref.style,
    backgroundColor = _ref.backgroundColor,
    duration = _ref.duration,
    children = _ref.children,
    loaded = _ref.loaded;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isHidden = _useState2[0],
    setHidden = _useState2[1];
  var hideSkeleton = function hideSkeleton() {
    setHidden(true);
  };
  var skeletonStyle = {};
  width !== null ? skeletonStyle.width = width : skeletonStyle.width = "";
  height !== null ? skeletonStyle.height = height : skeletonStyle.height = "";
  shape === "circle" ? skeletonStyle.borderRadius = "50%" : skeletonStyle.borderRadius = "";
  style !== null ? skeletonStyle = _extends({}, skeletonStyle, style) : void 0;
  backgroundColor !== null ? skeletonStyle.backgroundColor = backgroundColor : skeletonStyle.backgroundColor = "white";
  if (duration) setTimeout(hideSkeleton, duration);

  // let skeletonChildren = []
  // if(children !== undefined || children !== null){
  //     for(let i = 0; i < children.length; i++){
  //         if(children[i].type.name === "Skeleton")
  //             skeletonChildren.push(children[i])
  //     }
  // }

  return /*#__PURE__*/React.createElement("div", {
    className: "jsx-638717868"
  }, loaded || isHidden ? children : /*#__PURE__*/React.createElement("div", {
    style: skeletonStyle,
    className: "jsx-638717868" + " " + "skeleton-box"
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "638717868"
  }, ".skeleton-box.jsx-638717868{display:inline-block;position:relative;overflow:hidden;background-color:#fff;text-align:center;}.skeleton-box.jsx-638717868::after{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(211,211,211,0) 0,rgba(211,211,211,0.6) 70%,rgba(211,211,211,0));-webkit-animation:shimmer-jsx-638717868 1.5s infinite;animation:shimmer-jsx-638717868 1.5s infinite;content:'';}@-webkit-keyframes shimmer-jsx-638717868{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes shimmer-jsx-638717868{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}"));
};
export default Skeleton;