import Breadcrumb, { BreadcrumbItem } from "@/components/breadcrumb";
import Metadata from "@/components/Metadata"
import React from "react"
import Image from "next/image";
import Link from "next/link";
import { getBlogs } from "@/services/public";
import { BlogM } from "@shared/interfaces";

export const dynamic = 'force-dynamic';
const Blog: React.FC = async () => {


    const blogs = await getBlogs();


    const bread: BreadcrumbItem[] = [
        {
            href: "",
            label: "Bilgi Bankası ",
            isCurrent: true,
        },
    ];

    return (

        <>
            <Metadata seoTitle="Blog" seoDescription="Blog sayfası" />

            <Breadcrumb items={bread} />
            <div className="container py-20"> 

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-4 md:gap-2 lg:gap-4">


                    {blogs && blogs.map((item: BlogM) => (
                        <article key={item._id} className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl px-8 pb-8 pt-40 w-full mx-auto  ">
                            {item.image && <Image src={item.image} alt="University of Southern California" fill className="absolute inset-0 h-full w-full object-cover" />} 

                            <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
                            <Link href={`/blog/${item.slug}`} className="z-10 mt-3 text-3xl font-bold text-white">
                                <h3 className="z-10 mt-3 text-3xl font-bold text-white">{item.title}</h3>
                            </Link>
                             <div className="z-10 gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">{item.updatedAt ? new Date(item.updatedAt).toLocaleDateString('tr-TR') : "Unknown date"}</div>
                        </article>
                    ))}



                </div>
            </div>
        </>

    )


}

export default Blog