import { useEffect, useState } from "react"
import { deletePost, getPosts } from "../services/postService";
import type { Post } from "../types/Post";
import { Link } from "react-router-dom";

export default function PostList() {
  
    const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    getPosts().then(res => setPosts(res.data)).catch(err => console.error('Error fetching posts:', err));
  }, []);

    const handleDelete = (id: number) => {
        if(confirm("Are you sure you want to delete this post?")) {
            deletePost(id)
            .then(() => {
                setPosts(posts.filter(post => post.id !== id));
            })
            .catch(err => console.error('Error deleting post:', err));
        }
    }
    return (
    <div>
        <div className="p-3">
            <h1 className="text-2xl font-bold mb-4">Post List</h1>
            <Link 
            to="/create"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Create
            </Link>
            <div className="mt-4">
                <table className="min-w-full bg-white">
                    <thead>
                        <tr>
                            <th className="py-2 px-4 border-b border-gray-200">ID</th>
                            <th className="py-2 px-4 border-b border-gray-200">Title</th>
                            <th className="py-2 px-4 border-b border-gray-200">Body</th>
                            <th className="py-2 px-4 border-b border-gray-200">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {posts.map((post) => 
                        <tr key={post.id}>
                            <td className="py-2 px-4 border-b border-gray-200">{post.id}</td>
                            <td className="py-2 px-4 border-b border-gray-200">{post.title}</td>
                            <td className="py-2 px-4 border-b border-gray-200">{post.body}</td>
                            <td className="py-2 px-4 border-b border-gray-200">
                                <Link 
                                to={`/edit/${post.id}`} 
                                className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded mr-2">
                                    Edit
                                </Link>
                                <Link
                                to={`/show/${post.id}`}
                                className="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded mr-2">
                                    View
                                </Link>
                                <button
                                onClick={() => handleDelete(post.id)}
                                className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded">
                                    Delete
                                </button>
                            </td>
                        </tr>
                        )}
                    </tbody>
                </table>
        </div>
    </div>
    </div>
  )
}