import React from "react";
import SightComponent from "./SightComponent";
import { TouchableLayout } from "../TouchableLayout";

const SightsList = function SightsList({
  isOpen,
  isLoading,
  error,
  sightData,
  onSightClick,
  sightRefs,
  sightsListRef,
  highlightedSights,
}) {
  return (
    <TouchableLayout
      className={`list-of-sights-content ${isOpen ? "is-open" : ""}`}
      ref={sightsListRef}
    >
      <div className="list-of-sights-grid">
        {isLoading ? (
          <p>Загрузка достопримечательностей...</p>
        ) : error ? (
          <p className="error-message">{error}</p>
        ) : !sightData || sightData.length === 0 ? (
          <p style={{ paddingLeft: "13px" }}>Достопримечательности не найдены.</p>
        ) : (
          sightData.map((sight) => (
            <SightComponent
              key={sight.id || sight.name}
              title={sight.short_name || sight.name}
              media={{
                id: sight.thumbnail,
                type: sight.thumbnail_type,
              }}
              sightId={sight.id}
              onPointerUp={onSightClick}
              componentRef={(el) => (sightRefs.current[sight.id] = el)}
              isHighlighted={
                highlightedSights && highlightedSights.has(sight.id)
              }
            />
          ))
        )}
      </div>
    </TouchableLayout>
  );
};

export default SightsList;
