"use client";

import { BASE_URL } from "@/Constant";
import Image from "next/image";

function Brochures({ title, brochures }: any) {
  return (
    <div className="min-h-screen p-6 md:p-12">
      <h1 className="mb-4 text-4xl text-center py-4 pb-9 font-bold tracking-tight text-gray-900 sm:text-5xl">
        {title}
      </h1>
      <div className="md:w-[87%] mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          {brochures &&
            brochures?.map((brochure: any, i: any) => (
              <div
                key={i}
                className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300"
              >
                <div className="h-48 overflow-hidden relative">
                  <Image
                    src={`${BASE_URL}${brochure?.fileUrl}`}
                    alt={brochure.title}
                    layout="fill"
                    objectFit="cover"
                    unoptimized={true}
                  />
                </div>
                <div className="p-4">
                  <h3 className="text-center text-xl">{brochure.title}</h3>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

export default Brochures;