/* eslint-disable */
const { useState: useStatePB } = React;

function PhotoBand({ id, eyebrow, caption, prompt, src, mobileSrc, alt, showPrompt = true }) {
  const [open, setOpen] = useStatePB(false);
  const hasResponsivePhoto = Boolean(src && mobileSrc);

  return (
    <section className={"photo-band" + (open ? " open" : "") + (hasResponsivePhoto ? " has-responsive-photo" : "")} id={id}>
      {src
        ? <picture className="ph-picture">
            {mobileSrc && <source media="(max-width: 720px)" srcSet={mobileSrc} />}
            <img className="ph-img ph-photo" src={src} alt={alt || ""} />
          </picture>
        : <div className="ph-img"><span className="ph-img-tag">Photo placeholder · drop a JPG/PNG here</span></div>
      }
      <div className="ph-overlay">
        <div>
          {eyebrow && <div className="ph-eyebrow">{eyebrow}</div>}
          <p className="ph-caption">{caption}</p>
        </div>
        {showPrompt && <button className="ph-prompt-btn" onClick={() => setOpen(true)}>Copy image prompt →</button>}
      </div>
      {showPrompt && <div className="ph-prompt">
        <div className="ph-prompt-head">
          <span>Image-generator prompt</span>
          <button onClick={() => setOpen(false)} aria-label="Close">×</button>
        </div>
        <div>{prompt}</div>
      </div>}
    </section>
  );
}
window.PhotoBand = PhotoBand;