import React from "react";

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

export const TenantTableSkeleton = ({ columns, rows = 5 }) => {
  return (
    <div className="card p-2 mt-3">
      <div className="card-datatable text-nowrap table-responsive">
        <table className="table border-top dataTable text-nowrap">
          <thead>
            <tr>
              {columns.map((col) => (
                <th key={col.key} className="sorting d-table-cell">
                  <div className={col.align}>{col.label}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[...Array(rows)].map((_, rowIdx) => (
              <tr key={rowIdx}>
                {columns.map((col, colIdx) => (
                  <td
                    key={col.key || colIdx}
                    className={`d-table-cell px-3 py-2 align-middle ${
                      col.align ?? ""
                    }`}
                  >
                    {/* Icon + text skeleton for first few columns */}
                    {col.key === "name" && (
                      <div className="d-flex align-items-center">
                        <div
                          className="me-2"
                          style={{
                            width: 24,
                            height: 24,
                            borderRadius: "5px",
                            background: "#ddd",
                          }}
                        />
                        <SkeletonCell width="120px" />
                      </div>
                    )}
                    {col.key === "domainName" && (
                      <div className="d-flex align-items-center">
                        <div
                          className="me-2"
                          style={{
                            width: 14,
                            height: 14,
                            borderRadius: "50%",
                            background: "#ddd",
                          }}
                        />
                        <SkeletonCell width="140px" />
                      </div>
                    )}
                    {col.key === "contactName" && (
                      <div className="d-flex align-items-center ">
                        <div
                          className="me-2"
                          style={{
                            width: 20,
                            height: 20,
                            borderRadius: "50%",
                            background: "#ddd",
                          }}
                        />
                        <SkeletonCell width="100px"  />
                      </div>
                    )}
                    {col.key === "contactNumber" && (
                      <SkeletonCell width="100px"/>
                    )}
                    {col.key === "status" && (
                      <SkeletonCell width="60px" height={24} />
                    )}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};