import React from "react";

const SkeletonLine = ({ height = 16, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-1 ${className}`}
    style={{
      height,
      width,
      borderRadius: 4,
    }}
  ></div>
);

const VersionListSkeleton = ({ items = 5 }) => {
  return (
    <div className="list-group mx-0">
      {[...Array(items)].map((_, idx) => (
        <div
          key={idx}
          className="list-group-item py-2 border border-bottom border-top-0 border-start-0 border-end-0"
        >
          {/* Top row: document name + version/status */}
          <div className="d-flex w-100 justify-content-between">
            <SkeletonLine width="40%" height={16} />
            <div className="d-flex gap-2">
              <SkeletonLine width="60px" height={14} />
              <SkeletonLine width="80px" height={14} />
            </div>
          </div>

          {/* Upload by row */}
          <div className="d-flex align-items-center gap-2 mt-2">
            <SkeletonLine width="24px" height="24px" className="rounded-circle" />
            <SkeletonLine width="120px" height={14} />
          </div>

          {/* Updated at row */}
          <div className="d-flex gap-2 mt-2">
            <SkeletonLine width="150px" height={14} />
          </div>
        </div>
      ))}
    </div>
  );
};

export default VersionListSkeleton;