import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import { Lightbox } from './Lightbox';

export function PostGrid({ posts, onSelect }: { posts: any[], onSelect: (ids: string[]) => void }) {
  const selected = new Set();
  const toggle = (id: string) => {
    selected.has(id) ? selected.delete(id) : selected.add(id);
    onSelect(Array.from(selected));
  };

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 p-4">
      {posts.map((post) => (
        <PostCard key={post.id} post={post} selected={selected.has(post.id)} onToggle={() => toggle(post.id)} />
      ))}
    </div>
  );
}

export function PostCard({ post, selected, onToggle }: any) {
  return (
    <div className="relative border rounded overflow-hidden group">
      <Checkbox checked={selected} onCheckedChange={() => onToggle()} className="absolute top-2 left-2 z-10" />
      <img src={post.previewUrl} alt="" className="w-full aspect-square object-cover" />
      <div className="p-2 flex justify-between items-center">
        <Badge variant="outline">{post.rating}</Badge>
        <span className="text-xs font-bold">{post.score}</span>
      </div>
    </div>
  );
}