/* ExerciseCard — pelvic-floor exercise tile with check + watch */
(function () {
  const { useState } = React;

  function ExerciseCard({ ex, num, done, onToggle }) {
    const Icon = window.Icon;
    const VideoModal = window.VideoModal;
    const [showVideo, setShowVideo] = useState(false);
    return (
      <div className={`card ${done ? "done" : ""}`} style={{padding: 0, overflow: "hidden"}}>
        <div className="exercise-card" style={{border: "0", borderRadius: 0, background: "transparent"}}>
          <div className="exercise-thumb">
            <span className="num">{num}</span>
          </div>
          <div>
            <div className="ex-name">{ex.name}</div>
            <div className="ex-meta">{ex.meta}</div>
            <div className="ex-tags">
              {ex.tags.map((t) => <span key={t} className="tag">{t}</span>)}
            </div>
          </div>
          <div style={{display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end"}}>
            <button className={`check-btn ${done ? "checked" : ""}`} onClick={onToggle} title="Mark done">
              <Icon.Check />
            </button>
            <button
              className="btn ghost watch-btn"
              style={{padding: "5px 10px", flex: "none", fontSize: 11, gap: 5, display: "inline-flex", alignItems: "center"}}
              onClick={() => setShowVideo(true)}
              title="Watch tutorial"
            >
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden>
                <rect x="0.5" y="0.5" width="9" height="7" rx="1.5" stroke="currentColor"/>
                <path d="M4 2.4v3.2L6.4 4 4 2.4z" fill="currentColor"/>
              </svg>
              Watch
            </button>
          </div>
        </div>
        {showVideo && <VideoModal ex={ex} onClose={() => setShowVideo(false)} />}
      </div>
    );
  }

  window.ExerciseCard = ExerciseCard;
})();