const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-2 ${className}`}
    style={{
      height,
      width,
    }}
  ></div>
);
export const TaskReportListSkeleton = () => {
  const skeletonRows = 8; // Number of placeholder rows

  return (
    <div>
      <table className="table">
        <thead>
          <tr>
            <th>Activity</th>
            <th>Assigned</th>
            <th>Completed</th>
            <th>Assign On</th>
            <th>Team</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {[...Array(skeletonRows)].map((_, idx) => (
            <tr key={idx}>
              <td>
                <SkeletonLine height={16} width="70%" />
                <SkeletonLine height={12} width="50%" />
              </td>
              <td>
                <SkeletonLine height={16} width="60%" />
              </td>
              <td>
                <SkeletonLine height={16} width="60%" />
              </td>
              <td>
                <SkeletonLine height={16} width="80%" />
              </td>
              <td className="text-center">
                <div className="d-flex justify-content-center gap-1">
                  {[...Array(3)].map((_, i) => (
                    <SkeletonLine key={i} height={24} width={24} className="rounded-circle" />
                  ))}
                </div>
              </td>
              <td>
                <div className="d-flex justify-content-end gap-2">
                  <SkeletonLine height={24} width="60px" />
                  <SkeletonLine height={24} width="60px" />
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};