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 = 10 }) => {
  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>
  );
};