import {useTrans} from '@ui/i18n/use-trans';
import {message} from '@ui/i18n/message';
import {Album} from '@app/web-player/albums/album';
import clsx from 'clsx';
import {AlbumIcon} from '@ui/icons/material/Album';
import {ChannelConfig} from '@common/channels/channel';

interface AlbumImageProps {
  album: Album;
  className?: string;
  size?: string;
  channelConfig?: ChannelConfig;
}
export function AlbumImage({album, className, size, channelConfig}: AlbumImageProps) {
  const {trans} = useTrans();
  
  // Determine which image to use based on channel config
  let src = album?.image;
  let isBanner = false;
  
  if (channelConfig?.imageSource === 'banner') {
    // Use banner_image if available and imageSource is set to banner
    src = album?.banner_image || album?.image;
    isBanner = true;
  }
  
  // For banner images, filter out h-full from size prop to prevent conflicts
  let processedSize = size;
  if (isBanner && size) {
    processedSize = size.replace(/\bh-full\b/g, '').trim();
  }
  
  const imgClassName = clsx(
    className,
    processedSize,
    'object-cover bg-fg-base/4',
    isBanner ? 'h-[300px]' : 'aspect-square', // Banner: fixed 300px height, Cover: 1:1 ratio
    !src ? 'flex items-center justify-center' : 'block',
  );

  return src ? (
    <img
      className={imgClassName}
      draggable={false}
      loading="lazy"
      src={src}
      alt={trans(message('Image for :name', {values: {name: album.name}}))}
    />
  ) : (
    <span className={clsx(imgClassName, 'overflow-hidden')}>
      <AlbumIcon className="max-w-[60%] text-divider" size="text-9xl" />
    </span>
  );
}