import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
import { clsx } from 'clsx';
import { useListItemMedia } from '../useListItemMedia';
import { ListItemMediaSize } from '../ListItemContext';

export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {
  size?: ListItemMediaSize;
};

/**
 * This component allows for rendering 2 avatars. It's a thin wrapper around the
 * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
 * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />
 * <br />
 * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
 */
export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
  useListItemMedia(size);

  return (
    <AvatarLayoutComp
      {...props}
      size={size}
      className={clsx('wds-list-item-media-avatar-layout', className)}
    />
  );
};
AvatarLayout.displayName = 'ListItem.AvatarLayout';