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

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

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

const ListItem: FC<ListItemProps> = ({
  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 m-b-0">
            {value}
          </Body>
        )}
      </div>

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

export default ListItem;
