import { useSharedState } from "../../../store/useSharedState";

function GeneratePreviewImage({ preview, urls }) {
  const imagePrefix =
    import.meta.env.MODE === "development"
      ? import.meta.env.VITE_PUBLIC_URL
      : "";
  const previewMode = useSharedState((state) => state.previewMode);
  const urlRadioPoint = useSharedState((state) => state.urlRadioPoint);
  const photoAlt = useSharedState((state) => state.photoAlt);

  if (preview)
    return (
      <img
        src={`${imagePrefix}/${urls[previewMode]}`}
        alt={photoAlt || ""}
        className="idm_picture__img"
        loading="lazy"
      />
    );

  return (
    <>
      {urlRadioPoint === "rwd" ? (
        <picture>
          <source
            srcSet={`${imagePrefix}/${urls.desktop}`}
            media="(min-width: 979px)"
          />
          <source
            srcSet={`${imagePrefix}/${urls.tablet}`}
            media="(min-width: 757px)"
          />
          <img
            src={`${imagePrefix}/${urls.mobile}`}
            alt={photoAlt || ""}
            className="idm_picture__img"
            loading="lazy"
          />
        </picture>
      ) : (
        <img
          src={`${imagePrefix}/${urls.single}`}
          alt={photoAlt || ""}
          className="idm_picture__img"
          loading="lazy"
        />
      )}
    </>
  );
}

export default GeneratePreviewImage;