const QUESTIONS = [
  'How does authentication work in this system?',
  'Which services depend on the database?',
  'Where are request validation rules defined?',
  'What should a new engineer read first?',
  'Which modules are highest risk to change?',
  'How is deployment configured?',
];

export default function SuggestedQuestions({ onSelect }) {
  return (
    <div className="mx-auto grid max-w-2xl gap-2 text-left sm:grid-cols-2">
      {QUESTIONS.map((question) => (
        <button
          key={question}
          onClick={() => onSelect(question)}
          className="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2 text-xs text-slate-400 transition-colors hover:border-cyan-400/30 hover:text-slate-100"
        >
          {question}
        </button>
      ))}
    </div>
  );
}