import { cn } from '../../utils/cn'
import { Typography } from '../Typography'
import { getPaginationDisplayState } from './pagination.shared'

export interface PaginationDisplayProps {
  pageIndex: number
  pageSize?: number
  totalCount?: number
  currentPageCount?: number
  isLoading?: boolean
  className?: string
}

export function PaginationDisplay({
  pageIndex,
  pageSize,
  totalCount,
  currentPageCount,
  isLoading = false,
  className,
}: PaginationDisplayProps) {
  const { hasTotalCount, canRenderDisplay, start, end } =
    getPaginationDisplayState({
      pageIndex,
      pageSize,
      totalCount,
      currentPageCount,
    })

  if (!canRenderDisplay) return null

  const numberColor = isLoading ? 'muted' : 'foreground'

  return (
    <div className={cn('flex items-center gap-1', className)}>
      <Typography variant="body-s" color="muted">
        Showing
      </Typography>
      <Typography variant="body-s" color={numberColor} className="font-medium">
        {start}
      </Typography>
      <Typography variant="body-s" color="muted">
        to
      </Typography>
      <Typography variant="body-s" color={numberColor} className="font-medium">
        {end}
      </Typography>
      {hasTotalCount && (
        <>
          <Typography variant="body-s" color="muted">
            of
          </Typography>
          <Typography
            variant="body-s"
            color={numberColor}
            className="font-medium"
          >
            {totalCount}
          </Typography>
        </>
      )}
      <Typography variant="body-s" color="muted">
        records
      </Typography>
    </div>
  )
}