import { clsx } from 'clsx';
import AvatarViewComp, { type AvatarViewProps } from '../../avatarView';
import { useListItemMedia } from '../useListItemMedia';
import { ListItemMediaSize } from '../ListItemContext';

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

/**
 * This component renders a single avatar. It's a thin wrapper around the
 * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only
 * a subset of its sizes, 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 AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
  useListItemMedia(size);

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