import ImageComp, { type ImageProps } from '../../image';
import { clsx } from 'clsx';
import { useListItemMedia } from '../useListItemMedia';
import { ListItemMediaSize } from '../ListItemContext';

export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
  /**
   * The size of square container for the image, matching available avatar sizes.
   * @default 48
   */
  size?: ListItemMediaSize;
  /**
   * When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
   * @default ''
   */
  alt?: string;
};

/**
 * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`
 * or `<ListItem.AvatarLayout />` are insufficient.
 * It's a wrapper around the
 * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only
 * a subset of its props, in line with the ListItem's constraints.
 *
 * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).
 */
export const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {
  useListItemMedia(size);

  return (
    <div
      className={clsx('wds-list-item-media-image-wrapper')}
      style={
        {
          '--wds-list-item-media-size': `${size}px`,
        } as React.CSSProperties
      }
    >
      <ImageComp
        {...props}
        className={clsx(className, 'wds-list-item-media-image')}
        alt={alt}
        role={alt ? undefined : 'presentation'}
      />
    </div>
  );
};
Image.displayName = 'ListItem.Image';