masonry-filter.tsx

'use client'

import { useState, useRef } from 'react'
import { motion } from 'framer-motion'
import { Masonry } from '@/components/masonry'
import { Image } from '@/components/image'
import { Span } from '@/components/span'
import { LightboxHandler } from '@/components/lightbox/lightbox-handler'

interface MasonryFilterItem {
  id: number
  category: string
  image: string
  alt: string
}

interface MasonryFilterProps {
  categories: string[]
  items: MasonryFilterItem[]
  gap?: number