import React from "react";
import PropTypes from "prop-types";
import CapSkeleton from "@capillarytech/cap-ui-library/CapSkeleton";
import CapRow from "@capillarytech/cap-ui-library/CapRow";
import "./_capCustomSkeleton.scss";

export default function CapCustomSkeleton(props) {
  const { loader = true, children } = props;
  return (
    <>
      {loader ? (
        <div>
          <CapSkeleton
            active
            title={{
              style: {
                height: "2.5rem",
                width: "100%",
              },
            }}
            paragraph={false}
          />
          <CapRow gap={16} wrap className="cap-custom-skeleton-grid" justify="space-between">
            {Array.from({ length: 12 }).map((_, index) => (
              <CapRow key={index} className="cap-custom-skeleton-card">
                <CapSkeleton
                  active
                  title={{
                    style: {
                      height: "21.125rem",
                      width: "17.25rem",
                    },
                  }}
                  paragraph={false}
                />
              </CapRow>
            ))}
          </CapRow>
        </div>
      ) : (
        <>{children}</>
      )}
    </>
  );
}

CapCustomSkeleton.propTypes = {
  children: PropTypes.node,
  loader: PropTypes.bool,
};

