"use client";
import Footer from "@comp/Footer/page";
import Navbar from "@comp/Navbar/page";
import GalleryBox from "plugins/Gallery/page";
import { useContext, useEffect, useState } from "react";

import AddToCart from "@comp/Cards/Components/AddToCart/page";
import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import logo from "../../../public/images/logo.png";
import AppContext from "@ctx/AppContext";
import CardNormal from "@comp/Cards/CardNormal/page";
import Link from "next/link";
import ArticleContent from "@comp/ArticleContent";

const BrandData = ({ params, data, product }) => {
  const CTX = useContext(AppContext);

  useEffect(() => {
    CTX.fetchHairCosmetic();
  }, []);
  return (
    <>
      <Navbar theme={1} />
      <div className=" py-10">
        <div className="grid xs:grid-cols-1 rtl gap-6 lg:px-20">
          <div className="mt-[30px]">
            <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10 ">
              <div className="text-center relative mb-20">
                <div className="absolute xs:mt-[-20px] lg:mt-[-45px] w-full z-0">
                  <p className="xs:text-[30px] lg:text-[80px]  bet-text font-bold">
                    {data?.englishName} IN VESMEH
                  </p>
                </div>
                <h1 className="xs:text-[30px] lg:text-[40px] font-bold relative z-10">
                  وسمه با برند
                  <span className="text-primary-500"> {data?.persianName}</span>
                </h1>
                <p className="mb-0 text-sm text-gray-400">
                  با تصمین کمترین قیمت در تمامی دستنه بندی ها خرید کنید{" "}
                </p>
              </div>

              <div className="grid  xs:grid-cols-1 lg:grid-cols-5 gap-5">
                {product?.products?.map((e) => (
                  <div className="relative">
                    <CardNormal data={e} priority />
                  </div>
                ))}
              </div>

              {product?.products?.length >= 19 && (
                <div className="flex justify-center mt-8">
                  <Link
                    href={`/categories/0/${data?.slug}?brandIds=${data?.id}&page=0`}
                    className="z-90 relative"
                  >
                    <div className="mx-5 mt-8">
                      <p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
                        مشاهده بیشتر{" "}
                      </p>
                    </div>
                  </Link>
                </div>
              )}
            </div>

            {data.description ? (
              <ArticleContent htmlContent={data.description} />
            ) : (
              <p>Loading...</p>
            )}
          </div>
        </div>
      </div>

      <Footer />
    </>
  );
};

export default BrandData;