'use client';

import tagsPic from '../public/tags.svg';
import calendarPic from '../public/calendar.svg'

import AnimatedLink from '../components/animatedLink';
import Image from 'next/image';

interface BlogPost {
    label: string;
    body: string;
    publish: string;
    get_absolute_url: string;
    tags: string[]; 
}

interface BlogAreaProps {
    blogposts: BlogPost[];
}

export default function BlogArea({ blogposts }: BlogAreaProps) {
    return (
        <div className="blog-area pt-16 pb-8 w-full">
            <div className="blogposts">
                {blogposts.map((blogpost, index) => (
                    <div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
                        <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 w-full">
                            <div className="blogpost-label text-2xl mb-4">
                                <h2>
                                    <AnimatedLink href={blogpost.get_absolute_url}>
                                        {blogpost.label}
                                    </AnimatedLink>
                                </h2>
                            </div>
                            <ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
                                <li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
                                {blogpost.tags.map((tag, index) => (
                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</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-end mt-auto">
                                <ul className="text-base inline-flex justify-end items-center">
                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
                                    <li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
                                </ul>

                                <div className="text-xl">
                                    <AnimatedLink href={blogpost.get_absolute_url}>
                                        Read the article
                                    </AnimatedLink>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            {/* Include Pagination Component Here */}
        </div>
    );
}