export interface AdminTableProps {
  id: string;
  headers: any[];
  desktopRows: any;
  mobileCards: any;
  emptyState?: any;
  colSpan?: number;
  isEmpty?: boolean;
}

export const AdminTable = ({
  id,
  headers,
  desktopRows,
  mobileCards,
  emptyState,
  colSpan,
  isEmpty,
}: AdminTableProps) => {
  return (
    <>
      {/* Desktop Table View (≥ 768px) */}
      <div class="card desktop-only" style="display: none;">
        <div class="table-container">
          <table id={id}>
            <thead>
              <tr>
                {headers.map((header, i) => <th key={i}>{header}</th>)}
              </tr>
            </thead>
            <tbody>
              {isEmpty
                ? (
                  <tr>
                    <td
                      colSpan={colSpan || headers.length}
                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
                    >
                      {emptyState}
                    </td>
                  </tr>
                )
                : desktopRows}
            </tbody>
          </table>
        </div>
      </div>

      {/* Mobile Deck View (< 768px) */}
      <div
        id={`${id}MobileDeck`}
        class="mobile-only"
        style="display: flex; flex-direction: column; gap: 1rem;"
      >
        {isEmpty
          ? (
            <div class="card" style="text-align: center; padding: 2rem;">
              <p style="color: var(--text-muted); margin: 0;">
                {emptyState}
              </p>
            </div>
          )
          : mobileCards}
      </div>
    </>
  );
};