import React, { useState } from 'react';
import { Sparkles } from 'lucide-react';

interface TraitButtonsProps {
  field: 'personality' | 'communication_style' | 'topic_expertise' | 'hashtags' | 'emojis';
  options: string[];
  onTraitButtonClick: (field: 'personality' | 'communication_style' | 'topic_expertise' | 'hashtags' | 'emojis', value: string) => void;
}

// Component to render suggestion chips for a given field with provided options
const TraitButtons: React.FC<TraitButtonsProps> = ({ field, options, onTraitButtonClick }) => {
  const [selectedOption, setSelectedOption] = useState<string | null>(null); // Track selected option

  const handleDeleteTrait = (option: string) => {
    setSelectedOption(null); // Clear the selected option
    onTraitButtonClick(field, option); // Call the click handler to delete the trait
  };

  return (
    <div className="flex flex-wrap gap-2 mb-4">
      {options.map((option, index) => (
        <div key={index} className="flex items-center">
          <button
            className={`px-3 py-1 rounded-full transition-all duration-300 flex items-center justify-between 
                        ${selectedOption === option ? 'bg-yellow-400 text-gray-600' : 'bg-gray-100/30 hover:bg-yellow-500/30 text-gray-700'} 
                        border border-orange-500/30`}
            onClick={() => {
              setSelectedOption(option); // Update selected option
            }}
          >
            <div className="flex items-center">
              <Sparkles className="w-4 h-4 mr-2 text-orange-400" />
              {option}
            </div>
            <span
              className="text-red-500 ml-2 cursor-pointer" // Changed to span and added cursor pointer
              onClick={(e) => {
                e.stopPropagation(); // Prevent the click from bubbling up to the main button
                handleDeleteTrait(option); // Handle delete action
              }}
            >
              x
            </span>
          </button>
        </div>
      ))}
    </div>
  );
};

export default TraitButtons;