Untitled

import React, { useEffect, useState } from "react";
import styles from "./productdisplaygridfilter.module.scss";
import Container from "@/components/atoms/Container";
import Card from "@/components/molecules/Card";
import StandardCardBody from "@/components/molecules/StandardCardBody";
import FilterButton from "@/components/atoms/FilterButton";

const ProductDisplayGridFilter = ({ data }) => {
  const [category, setCategory] = useState("All");
  const [results, setResults] = useState(data.cards);
  useEffect(() => {
    console.log(results);
    setResults(
      data.cards.filter((card) => {
        if (category !== "All" && category !== card.body.category) {
          return false;
        }
        return card;
      })
    );
  }, [category]);

  return (
    <Container type="content" className={styles.component}>
      <section className={styles.filterButtons}>
        {data &&
          data?.categories?.map((category) => (
            <FilterButton key={category?.id} onClick={() => setCategory(category?.category)}>
              <p>{category?.category}</p>
            </FilterButton>
          ))}
      </section>
      <div className={styles.grid}>
        {results &&
          results.map((card) =>
            card?.image.landscape ? (
              <div className={styles.grid_card_landscape} key={card.image.src}>
                <Card
                  image={card?.image}
                  body={<StandardCardBody content={card?.body} />}
                  className={styles.grid_card_image_landscape}
                />
              </div>
            ) : (
              <div className={styles.grid_card} key={card.image.src}>
                <Card
                  image={card?.image}
                  body={<StandardCardBody content={card?.body} />}
                  className={styles.grid_card_image}
                />
              </div>
            )
          )}
        {results.length <= 0 && <p>No items were found...</p>}
      </div>
      {data && data.cards.length >= 6 ? (
        <div className={styles.loadMore}>
          <div className={styles.loadMore_button}>
            <button type="button">Load more</button>
          </div>
        </div>
      ) : null}
    </Container>
  );
};

export default ProductDisplayGridFilter;