import { PropsWithChildren, useContext } from 'react';
import { ListItemContext, type ListItemContextData } from '../ListItemContext';
import Body from '../../body';
import Link, { type LinkProps } from '../../link';
import { Typography } from '../../common';

export type ListItemAdditionalInfoProps = PropsWithChildren<{
  /**
   * Props object to be passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs) component.
   */
  action?: { label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>;
}>;

export const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {
  const { ids } = useContext<ListItemContextData>(ListItemContext);

  return (
    <Body
      type={Typography.BODY_DEFAULT}
      id={ids.additionalInfo}
      className="wds-list-item-additional-info"
    >
      {children}
      {action ? (
        <>
          {' '}
          <Link href={action.href} target={action.target} onClick={action.onClick}>
            {action.label}
          </Link>
        </>
      ) : null}
    </Body>
  );
};

AdditionalInfo.displayName = 'ListItem.AdditionalInfo';
