import React from 'react';
import { Badge } from '@/components/ui/badge';
import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';

interface ExpenseTitleSuggestionsProps {
  category: string;
  onSuggestionClick: (suggestion: string) => void;
}

const ExpenseTitleSuggestions: React.FC<ExpenseTitleSuggestionsProps> = ({
  category,
  onSuggestionClick
}) => {
  const titleSuggestions = getPersonalizedTitleSuggestions(category);
  
  if (!category || titleSuggestions.length === 0) {
    return null;
  }
  
  return (
    <div className="flex flex-wrap gap-2 mt-1 mb-2">
      {titleSuggestions.map((suggestion) => (
        <Badge 
          key={suggestion}
          variant="outline"
          className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
          onClick={() => onSuggestionClick(suggestion)}
        >
          {suggestion}
        </Badge>
      ))}
    </div>
  );
};

export default ExpenseTitleSuggestions;