import React from "react";

// Define the prop types
interface SkeletonUIProps {
  type: "asset" | "assetLibrary" | "assetWidget" | "default"; // You can expand this with other types as needed
}

// Define the SkeletonUI component
const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {

  // Function to render skeleton content based on 'type'
  const renderSkeleton = () => {
    switch (type) {
      case "assetLibrary":
        return (
          <>
            {Array(5)
              .fill(null) // Create an array of 5 empty items
              .map((_, index) => (
                <div key={index} className="skeleton-content">
                  <div className="skeleton asset-image"></div>
                  <div className="skeleton asset-details"></div>
                  <div className="skeleton organization"></div>
                  <div className="skeleton asset-review"></div>
                  <div className="skeleton button"></div>
                </div>
              ))}
          </>
        );

      case "assetWidget":
        return (
          <div className="skeleton-content">
            <div className="skeleton skeleton-widget"></div>
            <div className="skeleton skeleton-widget"></div>
          </div>
        );
      case "asset":
        return (
          <>
            <div className="skeleton-content">
              <div className="skeleton asset-name"></div>
              <div className="skeleton asset"></div>
            </div>
            <div className="skeleton-content">
              <div className="skeleton asset-name"></div>
              <div className="skeleton asset"></div>
            </div>
          </>
        );
        
      default:
        return (
          <div className="skeleton-content">
            <div className="skeleton-header">
              <div className="skeleton skeleton-title"></div>
              <div className="skeleton skeleton-subtitle"></div>
            </div>
            <div className="skeleton skeleton-card"></div>
            <div className="skeleton skeleton-card"></div>
          </div>
        );
    }
  };

  return <div className="skeleton-wrapper">{renderSkeleton()}</div>;
};

export default SkeletonUI;