import React from 'react';
import Link from 'next/link';
import { BlogType } from '@/types';

interface BlogCardProps {
    blog: BlogType;
}

const BlogCard: React.FC<BlogCardProps> = ({ blog }) => {
    return (
        <div className="vl-blog-1-item">
            <div className="vl-blog-1-thumb image-anime">
                <img src={blog.image} alt={blog.title} />
            </div>
            <div className="vl-blog-1-content">
                <div className="vl-blog-meta">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="/assets/img-app/icons/calender1.svg" alt="" /> {blog.date} <span> | </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="/assets/img-app/icons/user1.svg" alt="" /> {blog.authorName}
                            </a>
                        </li>
                    </ul>
                </div>
                <div className="space20"></div>
                <h4 className="vl-blog-1-title">
                    <Link href="/blogs/single">{blog.title}</Link>
                </h4>
                <div className="space16"></div>
                <p>{blog.description}</p>
                <div className="vl-blog-1-icon">
                    <Link href="/blogs/single">
                        <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default BlogCard;