import { ChevronRight } from '@transferwise/icons';
import type { ButtonProps } from '../../button/Button.types';
import { useListItemControl } from '../useListItemControl';
import { PrimitiveButton } from '../../primitives';
import { useContext } from 'react';
import { ListItemContext } from '../ListItemContext';

export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;

/**
 * This component allows for rendering a control functionally synonymous with HTML `anchor` or a
 * `button`, giving users a rich way to choose between options and navigate to another screen or
 * step in a flow. It offers only a subset of features of the HTML element in line with the
 * ListItem's constraints.<br />
 * <br />
 * Please refer to the [Design documentation](https://wise.design/components/list-item---navigation) for details.
 */
export const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {
  const { baseItemProps } = useListItemControl('navigation', { href, ...props });
  const { ids, describedByIds } = useContext(ListItemContext);
  const icon = <ChevronRight size={16} />;

  return href ? (
    <>{icon}</>
  ) : (
    <PrimitiveButton
      disabled={baseItemProps.disabled}
      aria-describedby={describedByIds}
      id={ids.control}
      className="btn-unstyled wds-list-item-control"
      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}
    >
      {icon}
    </PrimitiveButton>
  );
};

Navigation.displayName = 'ListItem.Navigation';