/**
 * File: Skeleton.tsx
 * Purpose:
 *   This file defines the `Skeleton` component, a reusable UI element designed to 
 *   provide a placeholder loading animation for content that is being loaded.
 *   Skeleton components help improve perceived performance and user experience by 
 *   visually indicating loading areas.
*/
import './Skeleton.scss' // import the styles

/**
 * @param className {string}  - The class name of the skeleton
 * @param width {string}  - The width of the skeleton
 * @param height {string} - The height of the skeleton
 * @param count {number} - The number of skeletons to display 
 * @returns {JSX.Element[]} An array of `span` elements styled as skeleton boxes.
 */

const Skeleton = ({ 
  className, 
  width, 
  height, 
  count = 1 
}: { 
  className?: string, 
  width?: string, 
  height?: string, 
  count?: number 
}) => {
  // Generate an array based on the count prop and map over it to create skeleton boxes
  return Array.from({ length: count }, (_, i) => i + 1).map((key) => (
    <span
      className={`skeleton-box ${className || ''}`} // Combine default and custom class names
      style={{ maxWidth: width, height: height }} // Apply custom dimensions if provided
      key={key} // Use index as a unique key for each skeleton box
    ></span>
  ));
};

export default Skeleton;