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 CapColumn from "@capillarytech/cap-ui-library/CapColumn";

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 gutter={16}>
              {Array.from({ length: 12 }).map((_, index) => (
                <CapColumn
                  key={index}
                  xs={24}
                  sm={12}
                  md={8}
                  lg={8}
                >
                  <CapSkeleton
                    active
                    title={{
                      style: {
                        height: "21.125rem",
                        width: "17.25rem",
                      },
                    }}
                    paragraph={false}
                  />
                </CapColumn>
              ))}
            </CapRow>
          }
        </div>
      ) : (
        <>{children}</>
      )}
    </>
  );
}

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

