import React from "react";

const SkeletonCell = ({
  width = "100%",
  height = 20,
  className = "",
  style = {},
}) => (
  <div
    className={`skeleton ${className}`}
    style={{
      width,
      height,
      borderRadius: 4,
      ...style,
    }}
  />
);

export const DocumentTableSkeleton = ({ rows = 5 }) => {
  return (

      <table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
        <thead>
          <tr>
            <th className="text-start">Name</th>
            <th className="text-start">Document Type</th>
            <th className="text-start">Uploaded By</th>
            <th className="text-center">Uploaded on</th>
            <th className="text-center">Status</th>
          </tr>
        </thead>

        <tbody>
          {[...Array(rows)].map((_, idx) => (
            <tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
              {/* Name */}
              <td className="text-start">
                <SkeletonCell width="120px" height={16} />
              </td>

              {/* Document Type */}
              <td className="text-start">
                <SkeletonCell width="100px" height={16} />
              </td>

              {/* Uploaded By (Avatar + Name) */}
              <td className="text-start">
                <div className="d-flex align-items-center gap-2">
                  <SkeletonCell width="30px" height={30} className="rounded-circle" />
                  <SkeletonCell width="80px" height={16} />
                </div>
              </td>

              {/* Uploaded on */}
              <td className="text-center">
                <SkeletonCell width="80px" height={16} />
              </td>

              {/* Status */}
              <td className="text-center">
                <SkeletonCell width="70px" height={20} className="rounded" />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
   
  );
};