import type { ReactNode } from "react";
import { AdminSignOutButton } from "./admin-controls";
import { StatusBadge } from "./ui";

export function AdminShell({
  businessName,
  children,
  displayName,
  role,
}: Readonly<{ businessName: string; children: ReactNode; displayName: string; role: string }>) {
  return (
    <div className="admin-shell">
      <a className="skip-link" href="#admin-content">
        Skip to administration content
      </a>
      <aside className="admin-sidebar">
        <p className="admin-sidebar__title">{businessName}</p>
        <p>{displayName}</p>
        <StatusBadge>{role}</StatusBadge>
        <nav aria-label="Administration" className="admin-nav">
          <ul className="admin-nav__list">
            <li>
              <a href="#overview">Overview</a>
            </li>
            <li>
              <a href="#catalog">Products</a>
            </li>
            <li>
              <a href="#inventory">Inventory</a>
            </li>
            <li>
              <a href="#orders">Orders</a>
            </li>
            <li>
              <a href="#payments">Payments</a>
            </li>
          </ul>
        </nav>
        <AdminSignOutButton />
      </aside>
      <main className="admin-content" id="admin-content" tabIndex={-1}>
        {children}
      </main>
    </div>
  );
}

export function AdminTable({
  caption,
  columns,
  emptyMessage,
}: Readonly<{ caption: string; columns: readonly string[]; emptyMessage: string }>) {
  return (
    <div className="admin-table">
      <table>
        <caption>{caption}</caption>
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column} scope="col">
                {column}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colSpan={columns.length}>{emptyMessage}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}