// CIL[BEGIN chunk_id="Pagination_module_header_1785000121" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render a compact pagination control for paginated lists"]
// CIL[DOC-RESPONSIBILITY responsibility="Provide previous/next buttons and a range label for server-paginated tables"]
// CIL[DOC-CONTEXT module="workbench.components.Pagination" layer="frontend-component" related_files="[\"custom/apps/workbench/pages/devops/DevopsDashboard.tsx\"]"]
// CIL[DOC-CONTRACT inputs="{ page, pageSize, total, onChange, onPageSizeChange? }" outputs="JSX pagination bar" errors="none" side_effects="none"]
// CIL[DOC-MICRO logic_summary="Computes total pages from total and pageSize, shows current range, and disables prev/next at boundaries" notable_decisions=[]]
// CIL[DOC-CONFIDENCE pass="first" score="0.90" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
import { Button } from '@core/components/ui/button'
import { NativeSelect } from '@core/components/ui/native-select'
// CIL[END chunk_id="Pagination_module_header_1785000121"]

// CIL[BEGIN chunk_id="Pagination_pagination_1785000121" type="function" identity="Pagination" parent="Pagination_module_header_1785000121"]
// CIL[DOC-MACRO purpose="Reusable pagination bar"]
// CIL[DOC-RESPONSIBILITY responsibility="Let users navigate pages and change page size"]
// CIL[DOC-CONTEXT module="workbench.components.Pagination" layer="frontend-component" related_files="[\"custom/apps/workbench/pages/observe/PerformancePage.tsx\"]"]
// CIL[DOC-CONTRACT inputs="page, pageSize, total, onChange, onPageSizeChange" outputs="JSX" errors="none" side_effects="none"]
// CIL[DOC-MICRO logic_summary="Renders range label, prev/next buttons, and optional page-size selector" notable_decisions=[]]
// CIL[DOC-CONFIDENCE pass="first" score="0.90" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
interface PaginationProps {
  page: number
  pageSize: number
  total: number
  onChange: (page: number) => void
  onPageSizeChange?: (size: number) => void
}

export function Pagination({ page, pageSize, total, onChange, onPageSizeChange }: PaginationProps) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize))
  const start = total === 0 ? 0 : (page - 1) * pageSize + 1
  const end = Math.min(page * pageSize, total)

  return (
    <div className="flex items-center justify-between py-2">
      <span className="text-xs text-muted-foreground">
        {start}-{end} of {total}
      </span>
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => onChange(page - 1)}
          disabled={page <= 1}
        >
          Previous
        </Button>
        <span className="text-xs tabular-nums">
          {page} / {totalPages}
        </span>
        <Button
          variant="outline"
          size="sm"
          onClick={() => onChange(page + 1)}
          disabled={page >= totalPages}
        >
          Next
        </Button>
      </div>
      {onPageSizeChange && (
        <NativeSelect
          value={pageSize}
          onChange={(e) => onPageSizeChange(parseInt(e.target.value, 10))}
          className="w-20 text-xs"
        >
          {[10, 20, 50].map((n) => (
            <option key={n} value={n}>
              {n}
            </option>
          ))}
        </NativeSelect>
      )}
    </div>
  )
}
// CIL[END chunk_id="Pagination_pagination_1785000121"]