const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-2 ${className}`}
    style={{ height, width }}
  ></div>
);
export const CollectionOverviewSkeleton = () => {
  return (
   <div className="card row p-1">

      {/* LEFT SIDE */} 
      <div className="col-8">
        <div className="">

          {/* Header */}
          <div className="d-flex align-items-center justify-content-between mb-3">
            <SkeletonLine height={24} width="180px" />
          </div>

          {/* Due & Collected summary */}
          <div className="d-flex align-items-center text-start px-6 mb-3">
            <SkeletonLine height={16} width="100px" className="me-2" />
            <SkeletonLine height={20} width="120px" className="me-2" />
            <SkeletonLine height={16} width="120px" className="ms-2 me-2" />
            <SkeletonLine height={20} width="120px" />
          </div>

          {/* Chart Skeleton */}
          <SkeletonLine height={250} width="100%" className="mt-2" />

        </div>

   
     
      </div>
    </div>

  );
};