import { Slot } from '@radix-ui/react-slot';
import React from 'react';
import {
  type AsChild,
  type HTMLAttributesWithoutComponentProps,
  isDefaultComponent
} from '../../utils/typeHelpers';
import { Utils } from '../../utils/util';

export const NJPaginationItem: React.FC<NJPaginationItemProps> = (props) => {
  const { index, current, children, asChild, ...htmlProps } = props;
  let className = 'nj-pagination__link';
  const ariaLabel = `Page ${index}`;

  if (current) {
    return (
      <span className={className} aria-label={ariaLabel} data-index={index} aria-current="true">
        {index}
      </span>
    );
  }

  if (isDefaultComponent(asChild, htmlProps)) {
    className = Utils.classNames(className, htmlProps.className)!;
    return (
      <button aria-label={ariaLabel} {...htmlProps} className={className} data-index={index}>
        {index}
      </button>
    );
  }

  return <Slot className={className}>{children}</Slot>;
};

type NJPaginationItemCommonProps = {
  index: number;
  current?: boolean;
};

export type NJPaginationItemProps = NJPaginationItemCommonProps &
  AsChild<HTMLAttributesWithoutComponentProps<'button', NJPaginationItemCommonProps>>;