const SuggestedOptions = ({ setChatInput }) => {
  const examples = [
    "Write an email requesting a 3-day vacation leave to my manager.",
    "Compose a song about nationalism and love for the country.",
    "Give me 3 easy-to-cook food recipes that I can prepare for a date night at home.",
    "Give me 5 of the best dog shampoos and conditioners I can find on Amazon.",
    "Write a business pitch for a food truck that serves European-Asian food fusion called EAT Express.",
    "Write a Youtube script about how to file taxes as a social media influencer in the US.",
    "Write a resume for an architect with 3 years of experience with green technology and sustainability.",
    "Give me 7 motivational quotes for start-up businesses to be used in social media posts.",
    "Write an article outline about the comparison of DC and Marvel movies.",
    "Give me a one-week itinerary for a trip to Hawaii.",
    "Write a short children's story about a dolphin that wanted to fly.",
    "Explain the difference between a samurai and a ninja.",
    "Explain how to create a blue button in html that turns to yellow on mouse hover."
    ];
  const handleExampleClick = (example) => {
    setChatInput(example);
  };

  return (
    <div className="suggested">
      <div className="suggestedrow title">
        <div className="suggested-header-title">
          <p>Chatbot+</p>
          {/* <p>powered by OpenAI</p> */}
        </div>
        <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>Remembers the user's earlier statement in the ongoing discussion.</li>
          <li>Allows the user to add more information or correct errors.</li>
          <li>Trained to deny requests that are not appropriate.</li>
        </ul>
      </div>
      <div className="suggestedcol rack3">
        <h2>Limitations</h2>
        <ul>
          <li>May sometimes give wrong or incorrect information.</li>
          <li>May at times produce harmful instructions or biased content.</li>
          <li>Limited knowledge of what's been happening in the world since 2021.</li>
        </ul>
      </div>
    </div>
  );

};

export default SuggestedOptions;