import cx from "classnames";
import React from "react";

import { Icon } from "../Icon/index";

interface PaginationItemProps {
  /** aria-label of page item */
  ariaLabel?: string;
  /** Text label inside page item */
  label?: string;
  /** Show icon as label */
  hasIcon?: boolean;
  /** Link href */
  href?: string;
  /** Active state */
  isActive?: boolean;
  /** Is first item */
  isFirst?: boolean;
  /** Is last item */
  isLast?: boolean;
  /** Additional CSS classes */
  className?: string;
}

const ITEM_CLASS_ROOT = "pagination__item";
const ANCHOR_CLASS_ROOT = "pagination__link";

export const PaginationItem: React.FC<PaginationItemProps> = ({
  ariaLabel,
  className,
  hasIcon,
  href,
  isActive,
  isFirst,
  isLast,
  label,
  ...other
}) => {
  const itemClasses = cx(ITEM_CLASS_ROOT, className);

  const anchorClasses = cx(ANCHOR_CLASS_ROOT, "btn btn--square", {
    [`${ANCHOR_CLASS_ROOT}--active`]: isActive,
  });

  return (
    <li className={itemClasses} {...other}>
      <a
        href={href}
        className={anchorClasses}
        aria-current={isActive ? "page" : undefined}
        aria-label={ariaLabel}
      >
        {hasIcon && isFirst && <Icon name="chevron-start" />}
        {!hasIcon && label}
        {hasIcon && isLast && <Icon name="chevron-end" />}
      </a>
    </li>
  );
};

PaginationItem.displayName = "PaginationItem";