import { useMemo } from 'react'
import VideoCard from './VideoCard'
import videos from '../data/videos'

export default function VideoGrid({ activeCategory, searchQuery, onVideoClick }) {
  const filtered = useMemo(() => {
    return videos.filter((v) => {
      const matchCat = activeCategory === 'All' || v.category === activeCategory
      const matchSearch = !searchQuery || v.title.toLowerCase().includes(searchQuery.toLowerCase())
      return matchCat && matchSearch
    })
  }, [activeCategory, searchQuery])

  if (filtered.length === 0) {
    return (
      <div className="text-center py-20 text-amber-600">
        <p className="text-lg font-medium">No videos found</p>
        <p className="text-sm mt-1">Try a different search or category</p>
      </div>
    )
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
      {filtered.map((video, i) => (
        <VideoCard key={video.id} video={video} index={i} onClick={onVideoClick} />
      ))}
    </div>
  )
}
