'use client';

import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface Project {
  id: string;
  title: string;
  category: string;
}

interface ProjectNavigatorGridProps {
  projects: Project[];
  currentProjectId?: string;
  onSelect: (id: string) => void;
}

export function ProjectNavigatorGrid({
  projects,
  currentProjectId,
  onSelect
}: ProjectNavigatorGridProps) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
      {projects.map((project, index) => (
        <Card
          key={project.id}
          className={cn(
            'cursor-pointer transition-all hover:shadow-md',
            currentProjectId === project.id && 'ring-2 ring-primary'
          )}
          onClick={() => onSelect(project.id)}
        >
          <CardContent className="p-4">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-lg font-bold text-muted-foreground">#{index + 1}</span>
                {currentProjectId === project.id && (
                  <Badge variant="default" className="text-xs">
                    Current
                  </Badge>
                )}
              </div>
              <p className="line-clamp-2 text-sm font-medium">{project.title}</p>
              <Badge variant="outline" className="text-xs">
                {project.category}
              </Badge>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
