import { jsx as _jsx } from "react/jsx-runtime";
import { css, keyframes } from "styled-components";
const pulse = keyframes `
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.6;
  }
`;
const CustomSkeleton = ({ width = "100%", height = "20px", counter = 1, circle = false, backgroundColor = "red", itereitorKey, containerMax = false, position = "column", gap = "5px", }) => {
    return (_jsx("div", { className: "custom-container-skeleton", css: css `
        display: flex;
        flex-direction: ${position};
        gap: ${gap};
        width: ${containerMax ? "100%" : ""};
      `, children: Array.from({ length: counter || 1 }).map((_, index) => (_jsx("div", { className: "custom-skeleton", css: css `
            background-color: ${backgroundColor};
            border-radius: ${circle ? "50%" : "5px"};
            width: ${width};
            min-height: ${height};
            animation: ${pulse} 1.5s ease-in-out infinite;
          ` }, index))) }, itereitorKey));
};
export default CustomSkeleton;
