import React from "react";
import { blogsData } from "../data/blogsData";
import Image from "next/image";
import Link from "next/link";

function RecentBlogs() {
  return (
    <div>
      {blogsData.slice(0, 4).map((blog: any, i: number) => {
        return (
          <div key={i} className="flex flex-wrap gap-y-3 border-b border-neutral-200">
            <div className="w-[30%] p-3">
              <Link href={blog.url}>
                  <Image
                  className="rounded-lg w-full h-20 object-cover"
                  src={blog.cardImg}
                  alt={blog.title}
                  width={180}
                  height={180}
                  />
              </Link>
            </div>
            <div className="w-[70%] flex justify-center flex-col">
                <Link href={blog.url}>
                    <h3 className="text-[18px] font-semibold leading-tight line-clamp-1 mb-1">{blog.title}</h3>
                </Link>
                <p className="text-[15px] line-clamp-2">{blog.shortDesc}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default RecentBlogs;