import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { formatCategoryName } from '@/lib/skills-utils';

interface FilterBarProps {
  categories: string[];
  selectedCategory: string;
  onSelect: (category: string) => void;
}

export function FilterBar({ categories, selectedCategory, onSelect }: FilterBarProps) {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant={selectedCategory === 'all' ? 'default' : 'outline'}
        size="sm"
        onClick={() => onSelect('all')}
        className={cn(
          'text-xs',
          selectedCategory === 'all' && 'bg-primary text-primary-foreground'
        )}
      >
        All
      </Button>
      {categories.map((category) => (
        <Button
          key={category}
          variant={selectedCategory === category ? 'default' : 'outline'}
          size="sm"
          onClick={() => onSelect(category)}
          className={cn(
            'text-xs capitalize',
            selectedCategory === category && 'bg-primary text-primary-foreground'
          )}
        >
          {formatCategoryName(category)}
        </Button>
      ))}
    </div>
  );
}