import {NormalizedModel} from '@ui/types/normalized-model';
import clsx from 'clsx';
import {ImageIcon} from '@ui/icons/material/Image';
import {ChannelConfig} from '@common/channels/channel';

interface Props {
  item: NormalizedModel;
  channelConfig?: ChannelConfig;
}

export function ChannelContentItemImage({item, channelConfig}: Props) {
  // Determine which image to use based on channel config and item type
  let imageSrc = item.image;
  let isBanner = false;
  
  if (channelConfig?.imageSource === 'banner' && item.model_type === 'album') {
    // For albums, use banner_image if available and imageSource is set to banner
    imageSrc = item.banner_image || item.image;
    isBanner = true;
  } else if (channelConfig?.imageSource === 'banner' && item.model_type === 'genre') {
    // For genres, use banner_image if available and imageSource is set to banner
    imageSrc = item.banner_image || item.image;
    isBanner = true;
  }
  
  const imageClassName = clsx(
    'w-full h-full rounded object-cover',
    isBanner ? 'h-[300px]' : 'aspect-square', // Banner: fixed 300px height, Cover: 1:1 ratio
    !imageSrc ? 'flex items-center justify-center' : 'block',
  );

  return imageSrc ? (
    <img className={imageClassName} src={imageSrc} alt="" />
  ) : (
    <span className={imageClassName}>
      <ImageIcon className="max-w-[60%] text-divider" size="text-6xl" />
    </span>
  );
}