import { cn } from "@/lib/utils";

export function AdminPanel({ children, className, dark = false }: { children: React.ReactNode; className?: string; dark?: boolean }) {
  return <div className={cn("rounded-lg border p-5 shadow-sm", dark ? "border-zinc-800 bg-zinc-900" : "border-slate-200 bg-white", className)}>{children}</div>;
}

export function AdminTable({ headers, rows, dark = false }: { headers: string[]; rows: React.ReactNode[][]; dark?: boolean }) {
  return (
    <div className={dark ? "overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900" : "overflow-hidden rounded-lg border border-slate-200 bg-white"}>
      <table className="w-full min-w-[760px] text-left text-sm">
        <thead className={dark ? "bg-zinc-800 text-zinc-300" : "bg-slate-50 text-slate-700"}>
          <tr>
            {headers.map((header) => (
              <th key={header} className="px-4 py-3 font-semibold">
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className={dark ? "divide-y divide-zinc-800 text-zinc-200" : "divide-y divide-slate-100 text-slate-800"}>
          {rows.length ? (
            rows.map((row, rowIndex) => (
              <tr key={rowIndex}>
                {row.map((cell, cellIndex) => (
                  <td key={cellIndex} className="px-4 py-4 align-top">
                    {cell}
                  </td>
                ))}
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={headers.length} className={dark ? "px-4 py-10 text-center text-zinc-500" : "px-4 py-10 text-center text-slate-500"}>
                No records yet.
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

export function StatusPill({ children, tone = "slate" }: { children: React.ReactNode; tone?: "green" | "amber" | "red" | "blue" | "slate" }) {
  return (
    <span
      className={cn(
        "inline-flex rounded-full px-2.5 py-1 text-xs font-semibold",
        tone === "green" && "bg-emerald-50 text-emerald-700",
        tone === "amber" && "bg-amber-50 text-amber-700",
        tone === "red" && "bg-red-50 text-red-700",
        tone === "blue" && "bg-blue-50 text-blue-700",
        tone === "slate" && "bg-slate-100 text-slate-700"
      )}
    >
      {children}
    </span>
  );
}
