"use client";
import Image from "next/image";
import { currency } from "@/lib/utils";
import DummyImg from "@/assets/images/burger.jpg";
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import { Pagination } from "swiper/modules";
import { Icons } from "../icons";

const CategoryCard = ({ image, title, count }: any) => (
    <div className="max-w-80 mx-auto pt-6">
    <div className="border border-primary/30 rounded-xl p-2 pt-8 flex flex-col items-center relative">
      {/* Sun icon at top */}
      <div className="absolute -top-2 left-1/2 -translate-x-1/2 bg-white px-3">
       <Icons.Offer />
      </div>
  
      {/* Promotional text */}
      <div className=" text-center">
        <h2 className="text-xl font-bold text-gray-800">Flat 30 % off</h2>
        <p className="text-gray-600 mt-1">
          Use code <span className="font-medium">ONLY4U</span> | above {currency}159
        </p>
      </div>
    </div>
  </div>
  
);

const RestroOffers = () => {
  const categories = [
    {
      id: 1,
      title: "Burgers & Fast food",
      image: DummyImg,
      count: 51,
    },
    {
      id: 2,
      title: "Salads",
      image: DummyImg,
      count: 32,
    },
    {
      id: 3,
      title: "Pasta & Casuals",
      image: DummyImg,
      count: 45,
    },
    {
      id: 4,
      title: "Pizza",
      image: DummyImg,
      count: 29,
    },
    {
      id: 5,
      title: "Breakfast",
      image: DummyImg,
      count: 21,
    },
    {
      id: 6,
      title: "Soups",
      image: DummyImg,
      count: 33,
    },
    {
      id: 7,
      title: "Asian",
      image: DummyImg,
      count: 27,
    },
    {
      id: 8,
      title: "Asian",
      image: DummyImg,
      count: 27,
    },
  ];

  return (
    <div className="max-w-[98vw] mx-auto py-8  bg-white">
      <div className="mb-8">
        
        <p className="text-start text-3xl font-bold text-black">
        All Offers from Papa Johns Sector 72
        </p>
      </div>

      <div className="px-4">
        <div
        >
          <Swiper
            slidesPerView={4}
            spaceBetween={30}
            pagination={{
              clickable: true,
            }}
            // modules={[Pagination]}
            className="mySwiper"
          >
            {categories.map((category) => (
              <SwiperSlide>
                <CategoryCard
                  key={category.id}
                  image={category.image}
                  title={category.title}
                  count={category.count}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </div>
  );
};

export default RestroOffers;