ihk24/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js

import './artwork.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";

export const createArtwork =
  ({
    type = 'artwork-image',
    image = 'Berlin',
  }) => {
    let imageId, imageWidth, imageHeight, imageSize;
    const artworkWrapper = createElement('div', ['artwork-wrapper'], null);
    artworkWrapper.dataset.type = type;
    if (type === 'artwork-both-sides' ){
      createElement('div', ['artwork-left'], '<span class="background"></span><span class="foreground"></span>', artworkWrapper);
    }
    createElement('div', ['artwork'], '<span class="background"></span><span class="foreground"></span>', artworkWrapper);
 
    if (image === 'Hamburg') {
      imageId = 'qpemSW6_1Z0';
    } else if (image === 'Berlin') {
      imageId = 'uFGi0_YciE0';
    } else if (image === 'Team') {
      imageId = '-VHQ0cw2euA';
    }

    if (type === 'artwork-image') {
      imageWidth = 800;
      imageHeight = 800;
      imageSize = '1-1';
    } else {
      imageWidth = 1920;
      imageHeight = 1080;
      imageSize = '3-2';
    }

    if (type === 'artwork-image' || type === 'background-image' || type === 'artwork-background-image') {
      const imageBox = createElement('div', ['image-box'], null, artworkWrapper);
      const picture = createElement('picture', [], null, imageBox);
      //createImage('https://source.unsplash.com/' + imageId + '/' + imageWidth + 'x' + imageHeight, imageWidth, imageHeight, 'Artwork Image', [], picture);
      createImage('./dummy/placeholder-' + imageSize + '.svg', imageWidth, imageHeight, 'Artwork Image', [], picture);
    }



    return artworkWrapper;
  }