import React from "react";
import CardRestaurant from "./CardRestaurant";
import { useSelector } from "react-redux";

export default function SearchResults() {
  var results = useSelector((store) => store.searchResults);
  const array = Array.from(results);
  var count = results.length;
  const restaurants = array.map((restaurant) => (
    <CardRestaurant
      key={restaurant._id}
      id={restaurant._id}
      name={restaurant.name}
      city={restaurant.city}
      description={restaurant.description}
      imgUrl={restaurant.imgUrl}
      hours={restaurant.workingHours}
      tags={restaurant.tags}
    />
  ));

  return (
    <div className="search-results">
      <div className="results-count">
        <p>Znaleziono: {count}</p>
        <hr />
      </div>
      {restaurants}
    </div>
  );
}