'use client';

import { useLanguage } from './LanguageProvider';

export default function SuggestionsSection() {
  const { t } = useLanguage();

  const suggestions = [
    { key: 'suggestion-seasons', icon: '🌱', color: 'from-green-400 to-emerald-500' },
    { key: 'suggestion-birds', icon: '🕊️', color: 'from-blue-400 to-cyan-500' },
    { key: 'suggestion-water', icon: '💧', color: 'from-cyan-400 to-blue-500' },
    { key: 'suggestion-computers', icon: '💻', color: 'from-purple-400 to-pink-500' },
    { key: 'suggestion-dreams', icon: '😴', color: 'from-pink-400 to-red-500' },
    { key: 'suggestion-rainbows', icon: '🌈', color: 'from-yellow-400 to-orange-500' }
  ];

  return (
    <div className="h-full flex flex-col">
      
      {/* Title */}
      <div className="text-center mb-4">
        <div className="flex justify-center items-center space-x-2">
          <span className="text-2xl animate-bounce">💡</span>
          <h3 className="text-lg font-black text-white drop-shadow-lg">
            Quick Ideas
          </h3>
          <span className="text-2xl animate-bounce" style={{animationDelay: '0.5s'}}>�</span>
        </div>
      </div>
      
      {/* Horizontal scrolling suggestions */}
      <div className="flex-1 flex overflow-x-auto space-x-3 pb-2">
        {suggestions.map((suggestion) => (
          <button
            key={suggestion.key}
            className={`min-w-[120px] bg-gradient-to-br ${suggestion.color} border-4 border-white hover:border-yellow-300 rounded-2xl p-3 text-center transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 hover:rotate-1 flex-shrink-0`}
          >
            <div className="text-2xl mb-2 animate-pulse">
              {suggestion.icon}
            </div>
            <p className="text-white font-bold text-xs leading-tight">
              {t(suggestion.key)}
            </p>
          </button>
        ))}
      </div>
    </div>
  );
}
