"use client";
import Image from "next/image";
import React, { useState } from "react";

const categories = [
  "All advertising",
  "Commissioned",
  "Discount Ads",
  "Brands Ads",
  "Ebooks",
  "Author ads",
  "Artist Ads",
  "Last Month ads",
  "Upcoming ads",
];

const images = [
  "/images/Airbnb_1.png",
  "/images/Airbnb_2.png",
  "/images/Airbnb_3.png",
  "/images/Amazon_AWS.png",
  "/images/Amazon_echo.png",
  "/images/Element.png",
  "/images/Huawei.png",
  "/images/Netflix.png",
  "/images/Qonto.png",
  "/images/Samsung.png",
];

const Page: React.FC = () => {
  const [selectedCategory, setSelectedCategory] = useState<string>(
    categories[0]
  );
  const handleCategoryClick = (category: string) => {
    setSelectedCategory(category);
  };
  return (
    <div className="w-full h-full flex flex-col py-4 items-center justify-start bg-white">
      <div className="w-[1280px] h-[282px]  bg-slate-400 rounded-md">
        <Image
          src="/images/Banner.png"
          alt="advertizers"
          width={1280}
          height={282}
        />
      </div>
      <div className="w-full px-4 bg-[#F3F3F3] mt-6 p-4 flex justify-center items-center">
        <div className="flex flex-wrap gap-4">
          {categories.map((category) => (
            <button
              key={category}
              className={`px-5 py-2 rounded-md cursor-pointer duration-300 ${
                selectedCategory === category
                  ? "bg-black text-white"
                  : "bg-white text-black"
              }`}
              onClick={() => handleCategoryClick(category)}
            >
              {category}
            </button>
          ))}
        </div>
      </div>
      <div className="w-[1280px] m-6 grid sm:grid-cols-1 md:grid-cols-5 gap-2">
        {images.map((image, index) => (
          <div
            key={index}
            className="flex w-full h-full flex-col items-center justify-start rounded-md"
          >
            <Image
              key={index}
              src={image}
              alt="advertizers"
              width={1290}
              height={280}
            />
            <button className="px-15 py-1 border border-slate-800 rounded cursor-pointer">
              List in Ebook
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Page;