import React from 'react';
import useProjectStore from '../../store/projectStore';

export default function FeatureSuggestions({ suggestions }) {
  const { addFeature, selectedFeatures } = useProjectStore();

  const isFeatureSelected = (featureId) => {
    return selectedFeatures.some(f => f.id === featureId);
  };

  const handleAddFeature = (suggestion) => {
    if (!isFeatureSelected(suggestion.id)) {
      addFeature(suggestion);
    }
  };

  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4">
      <h3 className="font-semibold text-gray-900 mb-4">
        🤖 AI Suggestions
      </h3>
      
      {suggestions.length === 0 ? (
        <p className="text-gray-500 text-sm">
          No more suggestions available. Create custom features!
        </p>
      ) : (
        <div className="space-y-3">
          {suggestions.map((suggestion) => (
            <div
              key={suggestion.id}
              className={`p-3 border rounded-lg transition-all ${
                isFeatureSelected(suggestion.id)
                  ? 'border-gray-300 bg-gray-50'
                  : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer'
              }`}
              onClick={() => !isFeatureSelected(suggestion.id) && handleAddFeature(suggestion)}
            >
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <h4 className="font-medium text-gray-900 text-sm mb-1">
                    💡 {suggestion.name}
                  </h4>
                  <p className="text-gray-600 text-xs mb-2">
                    {suggestion.description}
                  </p>
                  <span className="text-xs text-gray-500 capitalize">
                    {suggestion.complexity} complexity
                  </span>
                </div>
                
                {isFeatureSelected(suggestion.id) ? (
                  <span className="text-green-600 text-sm">✓</span>
                ) : (
                  <span className="text-blue-600 text-sm">+</span>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
