import Image from "next/image";
import Link from "next/link";
import {getAllBlogs} from "@/lib/api/api-blog";

export default function InspirationsSection() {
  // Retrieve all inspirations; adjust the number of items displayed if needed.
  const inspirations = getAllBlogs();
  const displayInspirations = inspirations.slice(0, 4); // Show only the first 4 posts

  return (
    <section className="w-full">
      <div className="relative mb-20 mx-auto h-fit w-full max-w-screen-2xl pt-2 px-2 sm:px-3 sm:pt-3 lg:pt-5 lg:px-10">
        <div className="flex flex-col gap-20">
          {/* Header Section */}
          <div className="z-10 flex h-full bg-projects bg-cover bg-bottom bg-no-repeat rounded-xl flex-row md:h-[320px] items-center px-5 py-12 sm:px-8 lg:px-10">
            <div className="flex w-full flex-col text-white items-center max-w-[700px] mx-auto gap-2">
              <div className="flex flex-col gap-2">
                <h1 className="text-3xl font-bold capitalize leading-tight text-bluegray sm:text-4xl sm:leading-tight">Inspirations</h1>
                <div className="h-1 w-full bg-green-500"></div>
              </div>
              <p className="text-center">Dive into real-life success stories, transformative projects, and actionable insights to reimagine your office or home space. Whether you're revamping your current setup or dreaming up a new design, let our inspirations spark the creativity you need to create a truly remarkable space.</p>
            </div>
          </div>
          {/* Inspirations Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 sm:gap-x-10 sm:gap-y-20">
            {displayInspirations.map((post) => (
              <div key={post.slug} className="flex flex-col gap-3">
                <Link href={`/inspirations/${post.slug}`}>
                  <Image src={post.coverImage} alt={post.title} width={0} height={0} sizes="100vw" style={{width: "100%", height: "auto"}} className="object-cover rounded-xl aspect-video" />
                </Link>
                <div className="px-5 lg:px-0 flex flex-col gap-4">
                  <Link href={`/inspirations/${post.slug}`}>
                    <p className="text-lg font-medium line-clamp-2">{post.title}</p>
                  </Link>
                  <p className="text-sm line-clamp-4">{post.excerpt}</p>
                  {/* Read More Button */}
                  <Link href={`/inspirations/${post.slug}`} className="">
                    Read More
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
