
import React from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Globe, Bot, Monitor, Filter } from "lucide-react";

export type ProjectCategory = 'website' | 'ai' | 'webapp';

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

const ProjectCategoryFilter = ({ 
  selectedCategory, 
  onCategoryChange, 
  projectCounts 
}: ProjectCategoryFilterProps) => {
  const getCategoryIcon = (category: string) => {
    switch (category) {
      case 'website':
        return <Globe className="h-4 w-4" />;
      case 'webapp':
        return <Monitor className="h-4 w-4" />;
      case 'ai':
        return <Bot className="h-4 w-4" />;
      default:
        return <Filter className="h-4 w-4" />;
    }
  };

  const getCategoryLabel = (category: string) => {
    switch (category) {
      case 'website':
        return 'Site Web';
      case 'webapp':
        return 'Web App';
      case 'ai':
        return 'Agent IA';
      default:
        return 'Tous';
    }
  };

  return (
    <div className="flex items-center space-x-3">
      <div className="flex items-center space-x-2">
        <Filter className="h-4 w-4 text-gray-500" />
        <span className="text-sm font-medium text-gray-700">Filtrer par :</span>
      </div>
      
      <Select value={selectedCategory} onValueChange={onCategoryChange}>
        <SelectTrigger className="w-[200px]">
          <SelectValue>
            <div className="flex items-center space-x-2">
              {getCategoryIcon(selectedCategory)}
              <span>{getCategoryLabel(selectedCategory)}</span>
            </div>
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center space-x-2">
                <Filter className="h-4 w-4" />
                <span>Tous</span>
              </div>
              <Badge variant="secondary" className="ml-2">
                {projectCounts.all}
              </Badge>
            </div>
          </SelectItem>
          <SelectItem value="website">
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center space-x-2">
                <Globe className="h-4 w-4" />
                <span>Site Web</span>
              </div>
              <Badge variant="secondary" className="ml-2">
                {projectCounts.website}
              </Badge>
            </div>
          </SelectItem>
          <SelectItem value="webapp">
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center space-x-2">
                <Monitor className="h-4 w-4" />
                <span>Web App</span>
              </div>
              <Badge variant="secondary" className="ml-2">
                {projectCounts.webapp}
              </Badge>
            </div>
          </SelectItem>
          <SelectItem value="ai">
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center space-x-2">
                <Bot className="h-4 w-4" />
                <span>Agent IA</span>
              </div>
              <Badge variant="secondary" className="ml-2">
                {projectCounts.ai}
              </Badge>
            </div>
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
};

export default ProjectCategoryFilter;
