import React from "react";
import Photos from "./mapped-Photos";
import "./reactStyling.css";

function GalleryHolder(response) {
  if (response.Term.data >= [0]) {
    return (
      <div className="row g-2 CSS-photo-div">
        {response.Term.data.photos.map(function (pic, index) {
          return (
            <div key={index} className="col-4">
              <Photos Term={pic} />
            </div>
          );
        })}
      </div>
    );
  } else {
    return null;
  }
}

export default GalleryHolder;
/*
 return (
      <div className="row g-2 CSS-photo-div">
        {searchT.photos.map(function (pic, index) {
          return (
            <div key={index} className="col-4">
              <img
                src={pic.src.landscape}
                className="img-fluid p-3 CSS-photo-img"
                alt={pic.alt}
              />
            </div>
          );
        })}
      </div>
    );

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers })*/

/* 
import React, { useState } from "react";
import axios from "axios";
import "./reactStyling.css";

function galleryDisplay(response) {
  let [searchTerm, searchInput] = useState("");

  console.log(response.Term.data);

  function picDisplay(response) {
    console.log(response);
  }

  let PicUrlApi = `https://api.pexels.com/v1/search?query=${searchTerm}&per_page=9`;
  const headers = {
    "Content-Type": "application/json",
    Authorization: "PkCuOi7pFR4744XoQAKQTmuCGPcGourRA4CqKkua5An7lrxWXnNhj11Z",
  };

  if (response.Term.data) {
    axios.get(PicUrlApi, { headers }).then(picDisplay);
    searchInput(response.Term.data[0].word);
  } else {
    return null;
  }
}

export default galleryDisplay;




*/