import { User } from "@/types/models";
import { useTranslations } from "next-intl";

import { ManageBlog } from "../_components/manage-blog";
import { URL_IMAGE } from "@/utils/url";

export function BlogsTab({ user }: { user: User }) {
    const t = useTranslations();
    const blogs = user?.blogs || [];

    return (
        <div className="rounded-md p-4 border space-y-4 text-end">
            <h2 className="text-2xl text-gray-700">
                {t("profile.my-blogs")}
            </h2>
            
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {blogs.length > 0 ? (
                    blogs.map((blog) => (
                        <div key={blog.id} className="p-4 rounded-lg border bg-white shadow-sm hover:shadow-md transition-shadow relative">
                            <ManageBlog blog={blog} />
                            {blog.image && (
                                <img src={`${URL_IMAGE}/${blog.image}`} alt={blog.title} className="w-full h-40 object-cover rounded-md mb-4" />
                            )}
                            <h3 className="text-lg text-gray-800 mb-2 line-clamp-1">{blog.title}</h3>
                            <div 
                                className="text-sm text-gray-600 line-clamp-3 mb-3"
                                dangerouslySetInnerHTML={{ __html: blog.content }}
                            />
                            <span className="text-xs text-gray-400">
                                {new Date(blog.created_at).toLocaleDateString()}
                            </span>
                        </div>
                    ))
                ) : (
                    <p className="text-sm text-gray-500 col-span-full">
                        {t("profile.no-blogs")}
                    </p>
                )}
            </div>
        </div>
    )
}