"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import data from "@/util/blog.json";

export default function BlogDetailsClient({ slug }) {
    const [blogPost, setBlogPost] = useState(null);

    useEffect(() => {
        setBlogPost(data.find((item) => item.slug === slug));
    }, [data, slug]);

    if (!blogPost) return null;

    return (
        <div>
            <div className="blog__details-thumb">
                <img src={`/assets/img/blogging/${blogPost.img}`} className="w-100" alt="" />
            </div>
            <h1 className="title">{blogPost.title}</h1>
            <div className="blog-post-meta">
                <ul className="list-wrap">
                    <li>
                        <Link href="/blog" className="blog__post-tag-two">
                            {blogPost.category}
                        </Link>
                    </li>
                    <li>
                        <div className="blog-avatar">
                            <div className="avatar-thumb">
                                <img src="/assets/img/blog/authorImg.png" alt="" />
                            </div>
                            <div className="avatar-content">
                                <p>
                                    By <Link href="#">{blogPost.author}</Link>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <i className="fas fa-calendar-alt" />
                        {blogPost.date}
                    </li>
                </ul>
            </div>
        </div>
    );
}