// ProjectProgressChartSkeleton.jsx
import React from "react";

const ProjectProgressChartSkeleton = () => {
  return (
    <div className="card" style={{ minHeight: "400px" }}>
      <div className="card-header">
        <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
          {/* Left: Title */}
          <div className="card-title text-start">
            <div className="placeholder-glow">
              <span className="placeholder col-6 mb-2"></span>
              <span className="placeholder col-4"></span>
            </div>
          </div>
        </div>

        {/* Row 2: Time Range Buttons */}
        <div className="d-flex flex-wrap mt-2">
          {Array(7)
            .fill(0)
            .map((_, idx) => (
              <span
                key={idx}
                className="placeholder bg-light col-1 me-2"
                style={{ height: "25px", borderRadius: "5px" }}
              ></span>
            ))}
        </div>
      </div>

      <div className="card-body">
        <div
          className="placeholder-glow"
          style={{ height: "250px", width: "100%" }}
        >
          <span className="placeholder bg-light col-12 h-100"></span>
        </div>
      </div>
    </div>
  );
};

export default ProjectProgressChartSkeleton;