import React from "react";

const ProjectCompletionChartSkeleton = () => {
  return (
    <div className="card h-100">
      <div className="card-header d-flex align-items-start justify-content-between">
        <div className="card-title mb-0 text-start">
          <h5 className="mb-1 fw-bold placeholder-glow">
            <span className="placeholder col-6 bg-light"></span>
          </h5>
          <p className="card-subtitle placeholder-glow">
            <span className="placeholder col-8 bg-light"></span>
          </p>
        </div>
      </div>
      {/* Keep a fixed height so card doesn't shrink */}
      <div className="card-body" >
        <div className="placeholder-glow">
          {Array.from({ length: 5 }).map((_, i) => (
            <div
              key={i}
              className="placeholder col-12 mb-2 bg-light"
              style={{ height: "20px", borderRadius: "4px" }}
            ></div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProjectCompletionChartSkeleton;