import "./AiObs.scss";
import { ImageCard } from "../ImageCard/ImageCard.jsx";
import { BadgeList } from "../BadgeList/BadgeList.jsx";

/**
 * Before/after-style AI observation showcase ("aIObs" element type): a
 * picture plus screenshot (optionally alongside a `screens` device frame
 * image, which switches to a stacked "computer + data" layout instead of the
 * default side-by-side one), with an optional badge row and add-on caption.
 *
 * @param {Object} props
 * @param {string} props.picture - Primary image URL.
 * @param {string} [props.pictureAddOn] - Optional caption/second image rendered next to `picture`.
 * @param {string} props.screenshot - Secondary image URL.
 * @param {string} [props.screens] - Optional device-frame image URL; when set, switches to the stacked layout.
 * @param {Array<{iconLink: string, text: string}>} props.badges - Badges rendered via {@link BadgeList}.
 */
export const AiObs = ({ picture, pictureAddOn, screenshot, screens, badges }) => {
  return (
    <div className="aiobs">
      <div className="aiobs__container">
        {screens ? (
          <div className="aiobs__computer">
            <div className="container__add-on">
              <div className="add-on"> {pictureAddOn ? pictureAddOn : null}</div>
            </div>
            <img className="computer__img" src={screens} alt="" />
            {/* <div className="computer__space"></div> */}
          </div>
        ) : null}

        {screens ? (
          <div className="aiobs__data">
            <ImageCard image={picture} />
            <ImageCard image={screenshot} />
          </div>
        ) : (
          <div className="no-screen">
            <div className="data--top">
              <div className="picturebox">
                <ImageCard image={picture} />
              </div>
              <div className="badges">
                {" "}
                {pictureAddOn ? (
                  <div className="picture__ad-on">
                    <ImageCard image={pictureAddOn} />
                  </div>
                ) : null}
                <BadgeList badges={badges} />
              </div>
            </div>
            <div className="data--bottom">
              <ImageCard image={screenshot} />
            </div>
          </div>
        )}
      </div>
      {screens ? <BadgeList badges={badges} format="row" /> : null}
    </div>
  );
};