import React from 'react';
import "./Placeholders.scss"

interface PlaceholdersProps {
  children: React.ReactNode;
  className?: string;
  isMargin?: boolean;
}

const Placeholders = ({ children, className, isMargin, ...props }: PlaceholdersProps) => {

  const modifyChildren = (child: React.ReactElement) => {
    const props = {
      className: `${child?.props?.className} placeholder ${isMargin ? 'margin' : ''}`
    };

    return React.cloneElement(child, props);
  }

  return (
    <div className={`placeholder-root placeholder-glow ${className}`} {...props}>
      {React.Children.map(children, child =>
        React.isValidElement(child) ? modifyChildren(child) : child)}
    </div>
  );
};

export default Placeholders;
export { Placeholders, PlaceholdersProps };