"use client";

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import Image from "next/image";

const PpsSection = () => {
  const image = [
    {
      id: 1,
      src: "/assets/PPS.png",
    },
    {
      id: 2,
      src: "/assets/contoh6.png",
    },
    {
      id: 3,
      src: "/assets/contoh7.png",
    },
  ];

  return (
    <div className="px-8 lg:px-20 py-4 lg:py-10">
      <div>
        <Carousel className="w-full mx-auto">
          <CarouselContent>
            {image?.map((news: any, index) => (
              <CarouselItem key={news?.id} className="grid grid-cols-1">
                <Card key={index} className="w-full overflow-hidden shadow-lg h-full">
                  <Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-full lg:h-[60vh] object-cover rounded-md" />

                  <CardContent className="p-4">
                    {/* <div className="flex items-center gap-2 text-white text-xs font-bold">
                    <span className={`${news.bgColor} px-2 py-1 rounded text-[12px] font-helvetica`}>{news.tag}</span>
                    <span className="text-[#A6711F] text-[12px] font-helvetica">{news.category}</span>
                  </div>
                  <p className="text-gray-400 text-[12px] font-helvetica mt-1">{news.date}</p>
                  <h3 className="text-[16px] font-helvetica font-bold mt-2">{news.title}</h3>
                  <p className="text-[14px] font-helvetica text-gray-500 mt-2">{news.description}</p> */}
                  </CardContent>
                </Card>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="hover:bg-black" />
          <CarouselNext className="hover:bg-black -mr-6" />
        </Carousel>
      </div>
    </div>
  );
};

export default PpsSection;