import Image from "next/image";
import Link from "next/link";

import back1 from "../../../public/images/back1.jpg";
import back2 from "../../../public/images/back2.jpg";
import back3 from "../../../public/images/back3.jpg";
import back4 from "../../../public/images/back4.jpg";
import back5 from "../../../public/images/back5.jpg";
import React from "react";
import PersianNumber from "plugins/PersianNumber";

const CategoriesHero = () => {
  const categories = [
    {
      name: "آرایش و مراقبت مو",
      url: "categories/3df995d4-6a36-4de2-9557-a5c3304529fe/آرایش-و-مراقبت-مو",
      products: 300,
      brands: 20,
      image: back1,
    },
    {
      name: "حالت دهنده و ژل مو",
      url: "categories/9e1289e7-6c8e-4634-b57b-448268c7492e/حالت-دهنده-و-ژل-مو",
      products: 20,
      brands: 5,
      image: back2,
    },
    {
      name: "بهداشت جنسی",
      url: "/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت%20جنسی",
      products: 200,
      brands: 10,
      image: back3,
    },
    {
      name: "بهداشت دهان و دندان",
      url: "categories/b7549222-87f7-4b0b-8938-210539b3a395/بهداشت-دهان-و-دندان",
      products: 50,
      brands: 10,
      image: back5,
    },
    {
      name: "لوازم اصلاح",
      url: "/categories/70cffd9e-f475-4245-87bb-5f175d286901/لوازم-اصلاح",
      products: 30,
      brands: 10,
      image: back4,
    },
  ];
  return (
    <>
      <div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-2 lg:px-20 mt-10">
        {categories.map((category, index) => (
          <Link
            href={category.url}
            key={index}
            className={` ${
              index === categories.length - 1
                ? "xs:col-span-2 lg:col-span-1"
                : " "
            }`}
          >
            <div
              className={`rounded-lg overflow-hidden relative xs:h-40 lg:h-64 group cursor-pointer `}
            >
              {/* Image as a background */}
              <div
                className="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-105"
                style={{ backgroundImage: `url(${category.image.src})` }}
              ></div>

              {/* Optional: Add a semi-transparent overlay for better text readability */}
              <div className="absolute inset-0 bg-black opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>

              {/* Text overlay */}
              <div className="absolute bottom-0 p-4 right-0 z-10">
                <p className="text-white text-right font-bold xs:text-sm lg:text-lg">
                  {category.name}
                </p>
                <p className="text-gray-300 text-right xs:text-[11px] lg:text-sm rtl">
                  +
                  <PersianNumber
                    number={category.products}
                    style={"mx-1 xs:text-[11px] lg:text-sm"}
                  />
                  محصول |
                  <PersianNumber
                    number={category.brands}
                    style={"mx-1 xs:text-[11px] lg:text-sm"}
                  />
                  برند
                </p>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </>
  );
};

export default CategoriesHero;