"use client"

import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"
import type { DocPageBorderCss } from "@/lib/drive/doc-page-setup"
import { cn } from "@/lib/utils"
export function DocsPageRims({
  pageCount,
  pageHeight,
  pageWidth,
  sheetBorderCss,
}: {
  pageCount: number
  pageHeight: number
  pageWidth: number
  sheetBorderCss?: DocPageBorderCss
}) {
  return (
    <>
      {Array.from({ length: pageCount }, (_, index) => {
        const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
        return (
          <div
            key={`page-rim-${index}`}
            className={cn(
              "docs-page-rim pointer-events-none absolute z-[22] box-border",
              sheetBorderCss && "docs-page-rim--imported"
            )}
            style={{
              top: pageTop,
              left: 0,
              width: pageWidth,
              height: pageHeight,
              ...(sheetBorderCss
                ? {
                    borderTop: sheetBorderCss.top ?? "none",
                    borderRight: sheetBorderCss.right ?? "none",
                    borderBottom: sheetBorderCss.bottom ?? "none",
                    borderLeft: sheetBorderCss.left ?? "none",
                    boxShadow: "none",
                  }
                : {}),
            }}
            aria-hidden
          />
        )
      })}
    </>
  )
}