'use client';

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

import blogTestPic from './retrofuturism.webp';

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} className="text-white hover:underline">
                    {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} className="text-white hover:underline">
                    Read
                  </Link>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* Include Pagination Component Here */}
    </div>
  );
}