import React from 'react'
import { StyledLoadMore } from './LoadMore.theme'
import { ILoadMore } from './LoadMore.interface'

const LoadMore = ({
  theme = 'light',
  numberPages = 1,
  currentPage = 100,
  children
}: ILoadMore) => {
  return (
    <StyledLoadMore theme={theme}>
      <span>
        SHOWING {currentPage} OF {numberPages}
      </span>

      <ProgressBar
        total={numberPages}
        progress={currentPage}
        height={1}
      ></ProgressBar>
      {children}
    </StyledLoadMore>
  )
}

export default LoadMore

interface IProgressBar {
  total: number
  progress: number
  height: number
}
export const ProgressBar = ({
  height = 10,
  total = 100,
  progress = 10
}: IProgressBar) => {
  const currentPercentage = (progress / total) * 100
  const percentageProgress = currentPercentage < 100 ? currentPercentage : 100
  return (
    <div className="progress-bar" style={{ height: `${height}px` }}>
      <div
        className="progress-bar--fill"
        style={{ width: `${percentageProgress}%` }}
      ></div>
    </div>
  )
}