import React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const categories = [
  { key: 'all', label: 'Alle', icon: '🎨' },
  { key: 'modern', label: 'Modern', icon: '🔤' },
  { key: 'handschrift', label: 'Handschrift', icon: '✍️' },
  { key: 'statement', label: 'Statement', icon: '🧑‍🎤' },
  { key: 'futuristisch', label: 'Futuristisch', icon: '🚀' },
  { key: 'aesthetic', label: 'Aesthetic', icon: '🧢' }
];

export default function CategoryFilter({ selectedCategory, onCategoryChange, fontCounts }) {
  return (
    <div className="mb-8">
      <div className="flex flex-wrap gap-2 justify-center">
        {categories.map((category) => (
          <Button
            key={category.key}
            variant={selectedCategory === category.key ? "default" : "outline"}
            onClick={() => onCategoryChange(category.key)}
            className={`rounded-full transition-all duration-300 ${
              selectedCategory === category.key
                ? 'bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-lg scale-105'
                : 'bg-white/20 border-white/30 text-white hover:bg-white/30 hover:scale-105'
            }`}
          >
            <span className="mr-2">{category.icon}</span>
            {category.label}
            {fontCounts[category.key] && (
              <Badge variant="secondary" className="ml-2 bg-white/20 text-white">
                {fontCounts[category.key]}
              </Badge>
            )}
          </Button>
        ))}
      </div>
    </div>
  );
}