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


function Home() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")

  const handleDeletePost = useCallback((postId) => {
    setPosts(prev => prev.filter(post => post.id != postId));
  }, [posts])

  const handleAddPost = useCallback(() => {
    if (title.trim() && description.trim()) {
      setPosts([...posts, { id: parseInt(Math.random() * 10000), title, description }]);
      setTitle("");
      setDescription("");
    }
  }, [title, description]);


  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input title={title} setTitle={setTitle} description={description} setDescription={setDescription} />
        <button data-testid="create-button" className="mt-10" onClick={handleAddPost}>
          Create Post
        </button>
      </div>
      <div className="posts-section grid-layout">
          {posts.map(post => <PostDisplay key={post.id} post={post} deleteHandler={() => handleDeletePost(post.id)} />)}
      </div>
    </div>
  );
	
import React from "react";

function Input({ title, setTitle, description, setDescription }) {

  return (
    <div className="layout-column justify-content-center align-items-center">
      <input className="w-100" type="text" placeholder="Enter Title" name="title" value={title} onChange={(evt) => setTitle(evt.target.value)} data-testid="title-input" />
      <textarea className="mt-10 w-100" placeholder="Enter Description" name="description" value={description} onChange={(evt) => setDescription(evt.target.value)} data-testid="description-input" />
    </div>
  );
}



import React from "react";

function PostDisplay({post, deleteHandler}) {
  return (
    <div data-testid="posts-container" className="flex wrap gap-10">
      <div className="post-box">
        <h3>{post?.title}</h3>
        <p>{post?.description}</p>
        <button onClick={deleteHandler}>Delete</button>
      </div>
    </div>
  );
}

export default PostDisplay;