manage/frontend/src/components/ui/table-pagination.tsx

import type { OnChangeFn } from "@tanstack/react-table";
import type { PaginationState } from "@tanstack/react-table";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";

/**
 * Shared pagination footer for table-style views.
 *
 * Renders the rows count, page-size select, page indicator, and prev/next
 * buttons. Works off the raw {@link PaginationState} primitives so it can back
 * both a TanStack `Table` instance (via a thin adapter) and standalone card
 * layouts that drive pagination directly (e.g. MediaMobilePagination).
 *
 * The Desktop DataTable and the Media mobile card list both consume this to
 * avoid the duplication flagged in
 * `openspec/changes/mobile-responsive-parity/verify-report.md` residual risk #5.
 */
export interface TablePaginationProps {
	pageIndex: number;
	pageSize: number;
	pageSizeOptions: number[];
	totalRows: number;
	pageCount: number;
	onPaginationChange: OnChangeFn<PaginationState>;
	/** Optional extra className on the outer container (e.g. "p-4"). */
	className?: string;
}

export function TablePagination({
	pageIndex,
	pageSize,
	pageSizeOptions,
	totalRows,
	pageCount,
	onPaginationChange,
	className,
}: TablePaginationProps) {
	return (
		<div
			className={cn(
				"flex flex-wrap items-center justify-between gap-3 text-sm",
				className,
			)}
		>
			<div className="text-muted-foreground">
				{`${totalRows} row${totalRows === 1 ? "" : "s"}`}
			</div>
			<div className="flex items-center gap-3">
				<div className="flex items-center gap-1.5">
					<span className="text-muted-foreground">Rows per page</span>
					<Select
						value={String(pageSize)}
						onValueChange={(value) =>
							onPaginationChange(() => ({
								pageIndex: 0,
								pageSize: Number(value),
							}))
						}
					>
						<SelectTrigger
							size="sm"
							className="w-[70px]"
							aria-label="Rows per page"
						>
							<SelectValue />
						</SelectTrigger>
						<SelectContent>
							{pageSizeOptions.map((option) => (
								<SelectItem key={option} value={String(option)}>
									{option}
								</SelectItem>
							))}
						</SelectContent>
					</Select>
				</div>
				<span className="text-muted-foreground">
					Page {pageIndex + 1} of {pageCount}
				</span>
				<div className="flex items-center gap-1">
					<Button
						variant="outline"
						size="sm"
						className="mobile-touch-target"
						onClick={() =>
							onPaginationChange((prev) => ({
								...prev,
								pageIndex: Math.max(0, prev.pageIndex - 1),
							}))
						}
						disabled={pageIndex <= 0}
						aria-label="Previous page"
					>
						Previous
					</Button>
					<Button
						variant="outline"
						size="sm"
						className="mobile-touch-target"
						onClick={() =>
							onPaginationChange((prev) => ({
								...prev,
								pageIndex: prev.pageIndex + 1,
							}))
						}
						disabled={pageIndex >= pageCount - 1}
						aria-label="Next page"
					>
						Next
					</Button>
				</div>
			</div>
		</div>
	);
}