import { clsx } from 'clsx';
import { forwardRef } from 'react';

import Chevron from '../chevron';
import { Position } from '../common';
import Option from '../common/Option';
import { OptionProps, ReferenceType } from '../common/Option/Option';

export type NavigationOptionProps = OptionProps;

/**
 * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 * @deprecatedSince 46.104.0
 * @see [Source](../listItem/ListItem.tsx)
 * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 * @see [Design docs](https://wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
  ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {
    if ('href' in rest && rest.href) {
      component = 'a';
    }

    return (
      <Option
        {...rest}
        ref={reference}
        as={component}
        className={clsx('np-navigation-option', className)}
        button={<Chevron orientation={Position.RIGHT} disabled={disabled} className="d-block" />}
        disabled={disabled}
        onClick={(event) => {
          if (disabled) {
            event.preventDefault();
            return;
          }

          if (onClick) {
            onClick(event);
          }
        }}
      />
    );
  },
);

export default NavigationOption;