"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";

const BrandData = ({ params, data }) => {
  console.log("data brand", data);
  const CTX = useContext(AppContext);
  const hairCosmeticData = CTX.state.hairCosmeticData;

  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">
                {hairCosmeticData?.products?.map((e) => (
                  <div className="relative">
                    <CardNormal data={e} priority />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </>
  );
};

export default BrandData;