
import React from "react";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import ProjectCategoryFilter, { ProjectCategory } from "./ProjectCategoryFilter";

interface ProjectsHeaderProps {
  onAdd: () => void;
  selectedCategory: ProjectCategory | 'all';
  onCategoryChange: (category: ProjectCategory | 'all') => void;
  projectCounts: {
    all: number;
    website: number;
    webapp: number;
    ai: number;
  };
}

const ProjectsHeader = ({ 
  onAdd, 
  selectedCategory, 
  onCategoryChange, 
  projectCounts 
}: ProjectsHeaderProps) => {
  return (
    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
      <h2 className="text-2xl font-bold">Gestion des Projets</h2>
      
      <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4">
        <ProjectCategoryFilter
          selectedCategory={selectedCategory}
          onCategoryChange={onCategoryChange}
          projectCounts={projectCounts}
        />
        
        <Button onClick={onAdd}>
          <Plus className="h-4 w-4 mr-2" />
          Ajouter un projet
        </Button>
      </div>
    </div>
  );
};

export default ProjectsHeader;
