const QUESTIONS = [
  "What port does analytics-service use?",
  "How does JWT authentication work?",
  "What Kafka topics are configured?",
  "Describe the CI/CD pipeline",
  "What databases are used?",
  "How is Nginx configured?",
];

interface Props {
  onSelect: (question: string) => void;
  disabled: boolean;
}

export function ExampleQuestions({ onSelect, disabled }: Props) {
  return (
    <section className="mb-6">
      <p className="text-gray-500 font-mono text-xs uppercase tracking-widest mb-3">
        // example questions
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
        {QUESTIONS.map((q) => (
          <button
            key={q}
            onClick={() => onSelect(q)}
            disabled={disabled}
            className="
              group text-left px-4 py-3 rounded-lg border border-green-900/40
              bg-gray-900/60 hover:bg-green-950/40 hover:border-green-700/60
              text-gray-300 hover:text-green-300
              font-mono text-sm leading-snug
              transition-all duration-200
              disabled:opacity-40 disabled:cursor-not-allowed
              hover:shadow-[0_0_12px_rgba(74,222,128,0.08)]
            "
          >
            <span className="text-green-600 group-hover:text-green-400 mr-1.5 transition-colors">
              $
            </span>
            {q}
          </button>
        ))}
      </div>
    </section>
  );
}