Componente Filtro de Galleria

.imagenes {
  animation: fadein 1s linear;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  text-align: center;
  color: white;
}

.image-container:hover .overlay {
  opacity: 1;
}

/* eslint-disable @next/next/no-img-element */
"use client";
import { useEffect, useState } from "react";
import "./style.css";
import { GalleryData } from "@/database/database";
import { SectionTitle } from "@/components/UI";


export const GalleryData = [
  {
    id: 1,
    titulo: "Body Treatments",
    image:
      "https://jthemes.net/themes/html/spamagic/files/images/gallery/img-1.jpg",
  },
  {
    id: 2,
    titulo: "Massage",
    image:
      "https://jthemes.net/themes/html/spamagic/files/images/gallery/img-09.jpg",
  },
  {
    id: 3,
    titulo: "Aroma Therapy",
    image:
      "https://jthemes.net/themes/html/spamagic/files/images/gallery/img-2.jpg",
  },
  {
    id: 4,
    titulo: "Herbs",
    image:
      "https://jthemes.net/themes/html/spamagic/files/images/gallery/img-5.jpg",
  },
  {
    id: 5,
    titulo: "Herbs",
    image:
      "https://jthemes.net/themes/html/spamagic/files/images/gallery/img-6.jpg",
  },

];





// Definición de la interfaz para los datos de la galería
interface GalleryItem {
  id: number;
  titulo: string;
  image: string;
}

export const SectionGalery = () => {
  const [data, setData] = useState<GalleryItem[]>([]);
  const [collection, setCollection] = useState<string[]>([]);

  useEffect(() => {
    setData(GalleryData);
    setCollection([...new Set(GalleryData.map((item) => item.titulo))]);
  }, []);

  const gallery_filter = (itemData: string) => {
    const filterData = GalleryData.filter((item) => item.titulo === itemData);
    setData(filterData);
  };

  return (
    <section className="mt-12 p-5 container mx-auto">
      <SectionTitle
        text1={"Nuestra Galería"}
        text2={"Una Piel Hermosa Comienza Aquí"}
        descriptions="Algunas personas reciben de la publicidad, el duelo no es puro en sí,
          ni la ola de dolor. ante todo el tiempo libre, se siente halagado por
          el desarrollo del casino a gran ritmor"
      />
      <div className="mb-8 mt-12">
        <ul className="flex flex-wrap text-center justify-center gap-6  p-5">
          <li>
            <button
              onClick={() => setData(GalleryData)}
              className="text-lg leading-4 font-semibold text-fondoSelect-claro dark:text-beige-claro transition-all duration-300 ease-in-out transform hover:scale-110"
            >
              Todos
            </button>
          </li>
          {collection.map((item, index) => (
            <li key={index}>
              <button
                onClick={() => {
                  gallery_filter(item);
                }}
                className="text-lg leading-4 font-semibold transition-all duration-300 ease-in-out transform hover:scale-110"
              >
                {item}
              </button>
            </li>
          ))}
        </ul>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {data.map((item) => (
          <article
            key={item.id}
            className="relative image-container overflow-hidden rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105"
          >
            <img
              src={item.image}
              alt={item.titulo}
              decoding="async"
              loading="lazy"
              className="aspect-square imagenes w-full h-full object-cover transition-all duration-300 ease-in-out transform hover:scale-110"
            />

            <div className="absolute bottom-0 left-0 right-0  text-white p-4">
              <p className="  text-xs leading-7 tracking-wide font-bold bg-beige-claro bg-opacity-50 inline-block px-2 py-1 rounded-full">
                {item.titulo}
              </p>
            </div>
            <div className="overlay">
              <p className="text-white font-semibold text-lg">
                Mostar Gigante {item.titulo}
              </p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};