import React from "react";
import { getMediaUrl } from "../../api/apiConfig";
import { useClickDetection } from "../../hooks/useClickDetection";

const SightComponent = function SightComponent({
  media,
  title,
  onPointerUp,
  sightId,
  componentRef,
  isHighlighted,
}) {
  // Используем общий хук для различения клика и скролла
  const { handlePointerDown, handlePointerUp, handleScroll } =
    useClickDetection();

  const renderThumbnail = () => {
    if (!media || !media.id) {
      return <div className="no-image-placeholder">No Media</div>;
    }

    const mediaUrl = getMediaUrl(media.id);

    return <img className="sight-image-svg" src={mediaUrl} alt={title} />;
  };

  return (
    <div
      className={`sight-component ${isHighlighted ? "sight-highlighted" : ""}`}
      onPointerDown={(e) => handlePointerDown(e, sightId)}
      onPointerUp={(e) => handlePointerUp(e, sightId, onPointerUp)}
      onScroll={handleScroll}
      ref={componentRef}
      role="button"
      tabIndex="0"
      aria-label={`Выбрать достопримечательность ${title}`}
    >
      <div className="sight-image">{renderThumbnail()}</div>
      <div className="sight-title">
        {title}
      </div>
    </div>
  );
};

export default SightComponent;
