"use client"
import { urlFor } from "@/lib/sanity";
import { blogPost, getBlogPosts } from "@/lib/services/blog.service";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

const RecentBlogs = () => {
  const [insights, setInsights] = useState<blogPost[]>([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const data = await getBlogPosts();
        setInsights(data);
      } catch (error) {
        console.log("Failed to fetch Insights", error);
      }
    };

    fetchPosts();
  }, []);
  return <div className="border ">
    <h1 className="text-3xl text-colour-2 font-semibold p-5">Recent Insights</h1>
    {insights.length>0 && (
         insights.slice(0,3).map((item, idx) => (
        <div key={idx} className="grid p-5 items-center grid-cols-4 gap-4 border-t">
          <div className="relative h-20">
            <Image
              src={urlFor(item.postImage).url()}
              layout="fill"
              objectFit="cover"
              className=""
              objectPosition="center"
              alt={item.title}
            />
          </div>
          <div className="col-span-3">
            <div>
              <Link
                className="text-sm font-semibold"
                href={`/media-and-insights/${item.currentSlug}`}
              >
                {`${item.title.substring(0, 50)}...`}
              </Link>
            </div>
            <span className="text-xs text-colour-1">{new Date(item.dateCreated).toDateString()}</span>
          </div>
        </div>
      ))
    )}
  </div>;
};

export default RecentBlogs;