components/ExamplePrompts.jsx

export default function ExamplePrompts({ examples, onSelect }) {
  return (
    <details className="bg-white rounded-xl shadow-md">
      <summary className="px-6 py-4 cursor-pointer font-semibold text-slate-700 hover:bg-slate-50 rounded-xl transition-colors">
        💡 Example Prompts
      </summary>
      <div className="px-6 pb-6 space-y-2">
        {examples.map((example, index) => (
          <button
            key={index}
            onClick={() => onSelect(example)}
            className="w-full text-left px-4 py-3 bg-slate-50 hover:bg-primary-50 border border-slate-200 hover:border-primary-300 rounded-lg transition-colors text-sm text-slate-700"
          >
            {example}
          </button>
        ))}
      </div>
    </details>
  );
}