import React from "react";
import "./ExamplePrompts.css";

export default function ExamplePrompts({ prompts, onSelect }) {
  return (
    <div className="example-prompts-box">
      <h3>Example Prompts</h3>
      <ul>
        {prompts.map((prompt, i) => (
          <li key={i} onClick={() => onSelect(prompt)} tabIndex={0} onKeyDown={e => {
            if(e.key === 'Enter' || e.key === ' ') onSelect(prompt);
          }}>
            {prompt}
          </li>
        ))}
      </ul>
    </div>
  );
}