import React, { useState } from "react";
import { RouteListItem } from "./RouteListItem";
import { LazyLoad } from "@/components/LazyLoad";

const RouteList = ({
  endpoints,
  onEndpointSelect,
  onEndpointDelete,
  selectedEndpointIndex,
  showSearch = false,
}) => {
  const [searchQuery, setSearchQuery] = useState("");

  const filteredEndpoints = endpoints.filter(endpoint =>
    endpoint.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="mt-5 flex flex-col gap-3 px-8">
      {showSearch && (
        <input
          type="text"
          placeholder="Search endpoints..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="mb-4 p-2 border border-gray-300 rounded"
        />
      )}
      {filteredEndpoints.map((endpoint, index) => (
        <LazyLoad key={`${endpoint?.id}`} count={1} counts={[1]}>
          <RouteListItem
            key={`${endpoint?.id}`}
            endpoint={endpoint}
            onEndpointDelete={onEndpointDelete}
            onEndpointSelect={onEndpointSelect}
            index={index}
            selectedEndpointIndex={selectedEndpointIndex}
          />
        </LazyLoad>
      ))}
    </div>
  );
};

export default RouteList;
