import React from "react";
import Masonry from "react-masonry-css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { useNavigate } from "react-router-dom";
const Gallery = ({ cats, loading, onLoadMore, onAddFavorite }) => {
    const navigate = useNavigate();
    const breakpointColumnsObj ={
        default:6,
        1100:5,
        768:4,
        500:3,
    };
    const handleCatClick =(cat)=>{
        console.log('id',cat)
        if (cat?.breeds && cat?.breeds[0] && cat?.breeds[0].id) {
            navigate(`/breed/${cat?.breeds[0].id}`);
          } else {
            console.error("No breed ID found for this cat.");
          }
    }
  return (
    <div>
      <Masonry className="masonry-grid" breakpointCols={breakpointColumnsObj} columnClassName="masonry-grid-column">
        {cats.map((cat,index) => (
          
          <div key={`${cat?.id}-${index}`}  className="cat-item" loading="lazy" onClick={() => handleCatClick(cat)}>
            <img src={cat?.url} alt={cat.breeds?.[0]?.name || "A cute cat"} />
            <button className="like-button" onClick={(e) => {
              e.stopPropagation();
              onAddFavorite(cat);
            }}>
             <FontAwesomeIcon icon={faHeart}/>
            </button>
          </div>
        ))}

      </Masonry>


      {loading && <p>Loading more cats...</p>}
      <button onClick={onLoadMore} disabled={loading}>
        Load More
      </button>
    </div>
  );
};

export default Gallery;