import { memoBy } from '@codeleap/utils'
import { PageProps } from './types' 
import { TypeGuards } from '@codeleap/types'

type PagerItemComponentProps = PageProps<any> & {
  renderItem: (props: any) => React.ReactElement
}

function PagerItemComponent(props: PagerItemComponentProps) {
  const { item, renderItem: RenderItem, ...info } = props

  if (TypeGuards.isFunction(item)) {
    const ItemComponent = item
    return <ItemComponent {...info} />
  }

  return <RenderItem {...info} item={item} />
}

/** Memoized only on `renderItem` and `item` — positional props (`isFirst`, `isLast`, etc.) are intentionally excluded so that changing the active page doesn't re-render every item in the carousel. */
export const PagerItem = memoBy(PagerItemComponent, ['renderItem', 'item'])