import React,{useState} from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";

function Home() {
  const [blogTitle, setBlogTitle] = useState("");
  const [blogText, setBlogText]= useState("");
  const [postes, setPostes]= useState([]);
  const [countId, setCountId] = useState(1);

  const handleCreate=()=>{
    if(!blogTitle || !blogText) return;
    const newPost={id:countId,title:blogTitle,text:blogText}
    setPostes([...postes, newPost]);
   setBlogTitle("");
   setBlogText("");
   setCountId(countId +1);
  }

  const handleDelete=(id)=>{
    setPostes((prev)=>prev.filter((post)=>post.id !== id));
  }
  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input blogTitle={blogTitle} blogText={blogText} setBlogTitle={setBlogTitle} setBlogText={setBlogText}/>
        <button data-testid="create-button" className="mt-10" onClick={handleCreate}>
          Create Post
        </button>
      </div>
      <div className="posts-section">
        <PostDisplay postes={postes} handleDelete={handleDelete}/>
      </div>
    </div>
  );
}

export default Home;