import * as stylex from '@stylexjs/stylex';

import type { ArtworkProps } from './types';

import ImageIconWrapper from '~/src/components/Icon/ImageIcon';
import Image from '~/src/components/Image';
import { artworkSizes, artworkStyles } from './styles';

export const Artwork = ({
  image,
  name,
  size = 'medium',
  quality = 50,
}: ArtworkProps) => {
  const imageSize = artworkSizes[size];

  if (!image) {
    return (
      <div
        {...stylex.props(artworkStyles.placeholder)}
        style={{ width: imageSize, height: imageSize }}
      >
        <ImageIconWrapper size={24} />
      </div>
    );
  }

  const imageUrl = `https://songwhip.com/cdn-cgi/image/quality=${quality},width=${imageSize},format=jpeg/${image}`;

  return (
    <Image
      src={imageUrl}
      alt={name}
      width={imageSize}
      height={imageSize}
      aspect={1}
      borderRadius="3px"
      style={artworkStyles.image}
    />
  );
};