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

export default function Layout({ children, onPromptSelect }) {
  const examplePrompts = [
    "Provide a simple idea, and the AI will generate a full screenplay — from genre to characters and dialogue — tailored just for you.",
    "Type a concept or theme, and watch as the AI builds a complete screenplay with plot, scenes, characters, and conversations.",
    "Enter a short prompt, and this AI crafts an engaging screenplay by designing the story’s genre, plot, characters, and dialogue automatically.",
    "Give your story idea, and the AI will write a polished screenplay including genre, storyline, character arcs, and authentic dialogue.",
    "Share a brief prompt and let the AI transform it into a full screenplay, developing the plot, characters, genre, and conversations effortlessly.",
  ];

  return (
    <div className="layout-container">
      <aside className="sidebar">
        <h2>Example Prompts</h2>
        <ul>
          {examplePrompts.map((prompt, idx) => (
            <li key={idx} onClick={() => onPromptSelect(prompt)}>
              {prompt}
            </li>
          ))}
        </ul>
      </aside>

      <main className="main-content">{children}</main>
    </div>
  );
}