import { clsx } from 'clsx';
import { ElementType, FC, ReactNode } from 'react';

import Body from '../body/Body';

export type LegacyListItemProps = {
  title: ReactNode;
  value: ReactNode;
  media?: ReactNode;
  action?: ReactNode;
  className?: string;
  isContainerAligned?: boolean;
  as?: ElementType;
};

/**
 * @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://docs.wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
const LegacyListItem: FC<LegacyListItemProps> = ({
  media,
  action,
  className,
  title,
  value,
  isContainerAligned,
  as = 'li',
  ...rest
}) => {
  const Element = as;

  return (
    <Element
      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {
        'p-x-2': !isContainerAligned,
      })}
      {...rest}
    >
      {media}

      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
        <Body type="body-default" className="text-secondary m-b-0">
          {title}
        </Body>
        {value && (
          <Body type="body-large" className="text-primary text-overflow-wrap m-b-0">
            {value}
          </Body>
        )}
      </div>

      {action ? <div className="np-list-item__action m-l-auto">{action}</div> : null}
    </Element>
  );
};

export default LegacyListItem;
