"use client";

import { invoke } from "@tauri-apps/api/core";
import { Blog } from "@/types";
import { useEffect, useState } from "react";
import BlogCard from "@/components/blog-card";

export default function ViewBlogPage() {
  const [blogs, setBlogs] = useState<Blog[]>([]);

  useEffect(() => {
    const fetchBlogs = async () => {
      return await invoke("get_blogs");
    };

    fetchBlogs().then((blogs) => {
      console.log("Blogs:", blogs);
      setBlogs(blogs as Blog[]);
    });
  }, []);

  return (
    <div className="flex flex-col p-2">
      <div className="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 m-4">
        {blogs.map((blog) => (
          <BlogCard key={blog.id} blog={blog} />
        ))}
      </div>
    </div>
  );
}