
import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Plus } from "lucide-react";
import ProjectCard from "./ProjectCard";

interface Project {
  id: string;
  title: string;
  category: 'website' | 'ai' | 'webapp';
  description: string;
  image: string;
  tags: string[];
  delivery_time: string;
  display_order: number;
  project_url: string | null;
  created_at: string;
}

interface ProjectsGridProps {
  projects: Project[];
  onEdit: (project: Project) => void;
  onDelete: (id: string) => void;
  onMoveUp: (project: Project) => void;
  onMoveDown: (project: Project) => void;
  onAdd: () => void;
}

const ProjectsGrid = ({
  projects,
  onEdit,
  onDelete,
  onMoveUp,
  onMoveDown,
  onAdd
}: ProjectsGridProps) => {
  if (projects.length === 0) {
    return (
      <Card>
        <CardContent className="text-center py-8">
          <p className="text-gray-500 mb-4">Aucun projet trouvé</p>
          <Button onClick={onAdd}>
            <Plus className="h-4 w-4 mr-2" />
            Ajouter le premier projet
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {projects.map((project, index) => (
        <ProjectCard
          key={project.id}
          project={project}
          index={index}
          totalProjects={projects.length}
          onEdit={onEdit}
          onDelete={onDelete}
          onMoveUp={onMoveUp}
          onMoveDown={onMoveDown}
        />
      ))}
    </div>
  );
};

export default ProjectsGrid;
