const SuggestedOptions = ({ setChatInput }) => {
  const examples = ["What is the capital of France?", "Generate a poem about love", "Tell me a joke"];
  const handleExampleClick = (example) => {
    setChatInput(example);
  };

  return (
    <div className="suggested">
      <div className="suggestedrow title">
        <h1>Welcome to AI-PRO</h1>
        <p>This chatbot is capable of answering questions and generating text based on the input you provide.</p>
      </div>
      <div className="suggestedcol rack1">
        <h2>Examples</h2>
        <ul className="suggested-options">
          {examples.map((example, index) => (
            <li key={index}
              onClick={() => handleExampleClick(example)}>
              {example}
            </li>
          ))}
        </ul>
      </div>
      <div className="suggestedcol rack2">
        <h2>Capabilities</h2>
        <ul>
          <li>Answering questions</li>
          <li>Generating text</li>
          <li>Providing information on a variety of topics</li>
        </ul>
      </div>
      <div className="suggestedcol rack3">
        <h2>Limitations</h2>
        <ul>
          <li>The chatbot may not have the latest information</li>
          <li>The chatbot may not be able to answer all questions</li>
          <li>The chatbot may not provide information in the desired format</li>
        </ul>
      </div>
    </div>
  );

};

export default SuggestedOptions;