import React from "react";

const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-2 ${className}`}
    style={{
      height,
      width,
    }}
  ></div>
);

export const PaymentHistorySkeleton = ({ count = 2 }) => {
  return (
    <div className="row text-start">
      {[...Array(count)].map((_, idx) => (
        <div className="col-12 mb-2" key={idx}>
          <div className="p-2 border-start border-warning">
            {/* Top Row: Date + Amount */}
            <div className="d-flex justify-content-between align-items-center">
              <SkeletonLine width="150px" height={18} /> {/* Date */}
              <SkeletonLine width="100px" height={18} /> {/* Amount */}
            </div>

            <div className="row mt-1">
              {/* Transaction ID */}
              <div className="col-12 col-md-6">
                <SkeletonLine width="80%" height={16} />
              </div>

              {/* Received By (Avatar + Name) */}
              <div className="col-12 col-md-6 d-flex align-items-center gap-2">
                <SkeletonLine width="30px" height={30} className="rounded-circle" /> {/* Avatar */}
                <SkeletonLine width="120px" height={16} /> {/* Name */}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};