// =============================================================
// Project editor — bottom slide strip: thumbnails + add/duplicate/delete.
// =============================================================
function ProjectSlidesStrip({ doc, slideIdx, onSelectSlide, onAddSlide, onDuplicateSlide, onDeleteSlide }) {
  return (
    <div className="editor-slides">
      {doc.slides.map((s, i) => {
        const thumbW = 60;
        const thumbScale = thumbW / doc.width;
        return (
          <div
            key={i}
            className={`editor-slide-thumb ${i === slideIdx ? "active" : ""}`}
            style={{ width: thumbW, height: doc.height * thumbScale }}
            onClick={() => onSelectSlide(i)}
          >
            <span className="editor-slide-thumb-number">{i + 1}</span>
            <div style={{ pointerEvents: "none" }}>
              <SlideRenderer slide={s} width={doc.width} height={doc.height} scale={thumbScale} />
            </div>
          </div>
        );
      })}
      <button className="editor-slide-add" onClick={onAddSlide} title="Add slide">+</button>
      <div style={{ flex: 1 }}></div>
      <button className="editor-slide-add" onClick={onDuplicateSlide} title="Duplicate slide" style={{ width: 40, fontSize: 14 }}>
        <Icons.Copy size={16} />
      </button>
      {doc.slides.length > 1 && (
        <button className="editor-slide-add" onClick={onDeleteSlide} title="Delete slide" style={{ width: 40, fontSize: 14 }}>
          <Icons.Trash size={16} />
        </button>
      )}
    </div>
  );
}

window.ProjectSlidesStrip = ProjectSlidesStrip;