// Atomic components: ImgTile, IconArrow, etc.

function ArrowIcon({ size = 14 }) {
  return (
    <svg className="btn-arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 12L12 2M12 2H4M12 2V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
    </svg>
  );
}

function ImgTile({ query, caption, className = '', index = 0 }) {
  const photos = usePexels(query, 6);
  const photo = photos && photos.length ? photos[index % photos.length] : null;
  return (
    <div className={`img-tile ${!photo ? 'skeleton' : ''} ${className}`}>
      {photo && <img src={photo.src} alt={photo.alt} loading="lazy" />}
      {caption && <div className="img-caption">{caption}</div>}
    </div>
  );
}

window.ArrowIcon = ArrowIcon;
window.ImgTile = ImgTile;