"use client"

import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"

/** Canvas-colored gap + side margin gutters between stacked pages. */
export function DocsPageSeparators({
  pageCount,
  pageHeight,
  pageWidth,
  margins,
  pageColor,
  interPageSpacer,
}: {
  pageCount: number
  pageHeight: number
  pageWidth: number
  margins: { top: number; right: number; bottom: number; left: number }
  pageColor: string
  interPageSpacer: number
}) {
  if (pageCount <= 1) return null

  return (
    <>
      {Array.from({ length: pageCount - 1 }, (_, index) => {
        const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
        const gapTop = pageTop + pageHeight
        const zoneTop = gapTop - margins.bottom

        return (
          <div key={`page-sep-${index}`} aria-hidden>
            <div
              className="docs-page-inter-margin-gutter pointer-events-none absolute z-[19] border-l border-[#dadce0] dark:border-[#5f6368]"
              style={{
                top: zoneTop,
                left: 0,
                width: margins.left,
                height: interPageSpacer,
                backgroundColor: pageColor,
              }}
            />
            <div
              className="docs-page-inter-margin-gutter pointer-events-none absolute z-[19] border-r border-[#dadce0] dark:border-[#5f6368]"
              style={{
                top: zoneTop,
                left: pageWidth - margins.right,
                width: margins.right,
                height: interPageSpacer,
                backgroundColor: pageColor,
              }}
            />
            <div
              className="docs-page-gap-band pointer-events-none absolute z-[20]"
              style={{
                top: gapTop,
                left: 0,
                width: pageWidth,
                height: DOCS_PAGE_GAP_PX,
              }}
            />
          </div>
        )
      })}
    </>
  )
}