function Home() {
  const [title,setTitle] = useState("");
  const [desc,setDesc] = useState("");
  const [error,setError] = useState("");
  const [blog,setBlog] = useState([]);

  const addBlog = ()=> {
    if (title.trim() && desc.trim()){
      setBlog(prev => [...prev, {title,desc}]);
      setTitle("");
      setDesc("");
    } else {
      setError("All fields are required");
    }
  }
  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input title={title} desc={desc} setTitle={setTitle} setDesc={setDesc}/>
        {error && 
        <p>{error}</p>}
        <button onClick={addBlog} data-testid="create-button" className="mt-10">
          Create Post
        </button>
      </div>
      <div className="posts-section">
        <PostDisplay blog={blog} setBlog={setBlog}/>
      </div>
    </div>
  );
	`function Input({title,setTitle,desc,setDesc}) {
  return (
    <div className="layout-column justify-content-center align-items-center">
      <input className="w-100" type="text" placeholder="Enter Title" value={title} onChange={(e)=> setTitle(e.target.value)} data-testid="title-input" />
      <textarea className="mt-10 w-100" placeholder="Enter Description" value={desc} onChange={(e)=> setDesc(e.target.value)} data-testid="description-input" />
    </div>
  );
}

export default Input;`

}

export default Home;