'use client';

import Link from 'next/link';
import Image from 'next/image';
import { FaTags, FaCalendarAlt } from 'react-icons/fa';

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 my-4 py-16 w-full">
            <div className="blogposts">
                {blogposts.map((blogpost, index) => (
                    <div key={index}>
                        <div className="blogpost flex flex-row overflow-hidden">
                            <div className="left mr-5">
                                <div className="blogpost-image">
                                    <Link href={blogpost.get_absolute_url}>
                                        <Image
                                            src="/images/retrofuturism.webp"
                                            alt="Retrospective Science Image"
                                            width={384}
                                            height={384}
                                            className="rounded-lg"
                                        />
                                    </Link>
                                </div>
                            </div>
                            <div className="right flex flex-col w-full">
                                <div className="blogpost-label text-2xl mb-4">
                                    <h2>
                                        <Link href={blogpost.get_absolute_url}>
                                            {blogpost.label}
                                        </Link>
                                    </h2>
                                </div>
                                <ul className="blogpost-tags inline-flex items-center flex-row space-x-3 mb-4">
                                    <li className="tag inline px-2 py-1 rounded-full">
                                        <FaTags className="inline-flex justify-baseline text-gray-800 dark:text-gray-200" size={24} />
                                    </li>
                                    {blogpost.tags.map((tag, index) => (
                                        <li key={`${tag}-${index}`} className="tag inline border border-gray-700 px-3 py-1 rounded-full text-base">
                                            <Link href="#">{tag}</Link>
                                        </li>
                                    ))}
                                </ul>
                                <div className="blogpost-description text-base mb-4 dark:text-gray-300 text-gray-800">
                                    {blogpost.body.slice(0, 512)}...
                                </div>
                                <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
                                    <div className="text-base inline-flex justify-end items-center">
                                        <div className="inline px-2 py-1">
                                            <FaCalendarAlt className="text-gray-800 dark:text-gray-200" size={24} />
                                        </div>
                                        <div className="inline">
                                            <p className='inline mx-2'>{blogpost.publish}</p>
                                        </div>
                                    </div>
                                    <div className="text-xl">
                                        <Link href={blogpost.get_absolute_url}>
                                            Читать →
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {index < blogposts.length - 1 && (
                            <hr className="my-8 border-t border-gray-200 dark:border-gray-700" />
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
}