// @ts-check
import getAttributesString from "./getAttributesString.js";

export default function getPictureElement({
  sources,
  className,
  layoutStyles,
  pictureAttributes,
  isBackgroundPicture = false,
}) {
  const {
    class: customClasses = "",
    style: customInlineStyles = "",
    ...restPictureAttributes
  } = pictureAttributes;

  const attributesString = getAttributesString({
    attributes: restPictureAttributes,
  });

  const classAttribute = ["astro-imagetools-picture", className, customClasses]
    .join(" ")
    .trim();

  const styleAttribute = [
    isBackgroundPicture
      ? `position: absolute; z-index: 0; width: 100%; height: 100%; display: inline-block;`
      : `position: relative; display: inline-block;`,
    customInlineStyles + (customInlineStyles.endsWith(";") ? "" : ";"),
    layoutStyles,
  ]
    .join(" ")
    .trim();

  const pictureElement = `<picture
    ${attributesString}
    class="${classAttribute}"
    style="${styleAttribute}"
    >${sources.join("\n")}
  </picture>`;

  return pictureElement;
}