import * as React from 'react'

export interface PaginationIndicatorProps {
  totalPageCount: number
  currentPage: number
}

export const PaginationIndicator: (
  props: PaginationIndicatorProps & React.RefAttributes<HTMLDivElement>
) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
  HTMLDivElement,
  PaginationIndicatorProps
>(function PaginationIndicator(
  { totalPageCount, currentPage }: PaginationIndicatorProps,
  ref
) {
  const bubbles = new Array(totalPageCount).fill('').map((_, index) => {
    if (index + 1 === currentPage) {
      return <span data-lk-active key={index} />
    } else {
      return <span key={index} />
    }
  })

  return (
    <div ref={ref} className="lk-pagination-indicator" aria-hidden="true">
      {bubbles}
    </div>
  )
})
