import * as React from 'react';

import { Anchor, type ButtonProp } from '../../../Anchor/Anchor';
import type { IconName } from '../../../Icon/IconName';

export interface IconPageProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
   * Number of the page to display on the button when the value is a number.
   * Or URL of the page when the value is a string.
   *
   * @default undefined
   */
  icon: IconName;
  page?: never;
}

export interface PagePageProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
   * Number of the page to display on the button when the value is a number.
   * Or URL of the page when the value is a string.
   *
   * @default undefined
   */
  page: number;
  icon?: never;
}

export type PageProps = IconPageProps | PagePageProps;

const button: ButtonProp = {
  variant: 'secondary',
};

export const PageAnchor: React.FC<PageProps> = ({ page, icon, ...rest }) => {
  const anchorWithIcon = (
    <Anchor
      button={React.useMemo(
        () => ({
          variant: 'secondary',
          icon: icon,
        }),
        [icon]
      )}
      {...rest}
    />
  );

  return icon ? (
    anchorWithIcon
  ) : (
    <Anchor button={button} {...rest}>
      {page}
    </Anchor>
  );
};