import React from 'react';
import './ImagePreview.css';

export default function ImagePreview({ images = [], visible = false, index = 0, onClose, onChange }) {
  if (!visible) return null;
  const len = images.length || 1;
  const go = dir => onChange && onChange((index + dir + len) % len);
  return (
    <div className="aa-imgprev-mask" onClick={e => { if (e.target === e.currentTarget) onClose && onClose(); }}>
      <button className="aa-imgprev-close" onClick={onClose}>✕</button>
      <button className="aa-imgprev-arrow prev" onClick={() => go(-1)}>‹</button>
      <img className="aa-imgprev-img" src={images[index]} alt={index} />
      <button className="aa-imgprev-arrow next" onClick={() => go(1)}>›</button>
      <div className="aa-imgprev-count">{index + 1} / {len}</div>
      <div className="aa-imgprev-thumbs">
        {images.map((u, i) => (
          <img key={i} className={'aa-imgprev-thumb' + (i === index ? ' is-active' : '')}
               src={u} onClick={() => onChange && onChange(i)} />
        ))}
      </div>
    </div>
  );
}