'use client';

import Link from 'next/link';
import Image from 'next/image';

interface BlogPost {
    label: string;
    body: string;
    publish: string;
    get_absolute_url: string;
}

interface BlogAreaProps {
    blogposts: BlogPost[];
}

export default function BlogArea({ blogposts }: BlogAreaProps) {
    return (
        <div className="blog-area py-16 border-t border-white w-full">
            <div className="blogposts">
                {blogposts.map((blogpost, index) => (
                    <div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
                        <div className="left mr-5">
                            <div className="blogpost-image">
                                <Image
                                    src="/images/retrofuturism.webp" // Path to the local image
                                    alt="Retrospective Science Image"
                                    width={384} // Set width (in pixels)
                                    height={384} // Set height (in pixels)
                                    className="rounded-lg"
                                />
                            </div>
                        </div>
                        <div className="right flex flex-col">
                            <div className="blogpost-label text-2xl mb-4">
                                <h2>
                                    <Link href={blogpost.get_absolute_url}>
                                        {blogpost.label}
                                    </Link>
                                </h2>
                            </div>
                            <ul className="blogpost-tags flex flex-row space-x-4 mb-4">
                                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Games</li>
                                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Science</li>
                            </ul>
                            <div className="blogpost-description text-base mb-4">
                                {blogpost.body.slice(0, 512)}...
                            </div>
                            <div className="blogpost-other flex flex-row justify-between items-center">
                                <div className="text-base">
                                    <p>Posted: {blogpost.publish}</p>
                                </div>
                                <div className="text-2xl">
                                    <Link href={blogpost.get_absolute_url}>
                                        Read the article
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            {/* Include Pagination Component Here */}
        </div>
    );
}