"use client";
import React from "react";
import Image from "next/image";
import SafeImage from "../SafeImage";
import { Product } from "../../lib/data/products";
import { useSettingsStore } from "../../lib/store/settingsStore";
import { 
  Sparkles, 
  ChevronLeft, 
  ShieldCheck, 
  Dog, 
  Cat, 
  Pill, 
  Droplet, 
  Package, 
  Award, 
  Activity, 
  BookOpen,
  CheckCircle2,
  Stethoscope,
  Heart,
  Layers,
  Check
} from "lucide-react";

export interface CategoryMeta {
  id: string;
  name: string;
  color: string;
  lightBg: string;
  borderBg: string;
  icon: React.ElementType;
  tagline: string;
  startPage: number;
}

interface CatalogPageSpreadProps {
  pageNumber: number;
  totalPages: number;
  pageType: "cover" | "toc" | "product" | "backcover" | "category";
  categoryMeta?: CategoryMeta;
  product?: Product;
  products?: Product[];
  onSelectProduct?: (product: Product) => void;
  onJumpToPage?: (pageNum: number) => void;
  categoriesList?: CategoryMeta[];
}

// Helper to determine product form icon & label
const getFormBadge = (unit?: string, name?: string) => {
  const str = ((unit || "") + " " + (name || "")).toLowerCase();
  if (str.includes("paste") || str.includes("خمیر")) return { label: "خمیر دارویی", icon: Droplet };
  if (str.includes("tab") || str.includes("قرص")) return { label: "قرص خوراکی", icon: Pill };
  if (str.includes("öl") || str.includes("روغن")) return { label: "روغن خالص", icon: Droplet };
  if (str.includes("pulver") || str.includes("پودر") || str.includes("mehl")) return { label: "پودر خوراکی", icon: Package };
  if (str.includes("gel") || str.includes("ژل")) return { label: "ژل بهداشتی", icon: Droplet };
  if (str.includes("spray") || str.includes("اسپری") || str.includes("shocker")) return { label: "اسپری موضعی", icon: Droplet };
  return { label: "مکمل دارویی", icon: Package };
};

// Helper for pet target species icon
const getSpeciesBadge = (suitableFor?: string) => {
  if (suitableFor === "سگ") return { label: "مخصوص سگ", icon: Dog };
  if (suitableFor === "گربه") return { label: "مخصوص گربه", icon: Cat };
  return { label: "سگ و گربه", icon: Heart };
};

export default function CatalogPageSpread({
  pageNumber,
  totalPages,
  pageType,
  categoryMeta,
  product,
  onJumpToPage,
  categoriesList = [],
}: CatalogPageSpreadProps) {
  const logoUrl = useSettingsStore(state => state.getText('site_logo', ''));

  // ==========================================
  // 1. LUXURY FRONT COVER (طراحی لوکس جلد)
  // ==========================================
  if (pageType === "cover") {
    return (
      <div className="w-full h-full bg-gradient-to-br from-slate-950 via-[#0a192f] to-[#040d1a] text-white p-6 md:p-8 flex flex-col justify-between relative overflow-hidden select-none box-border" dir="rtl">
        {/* Luxury Background Accents & Gold Borders */}
        <div className="absolute inset-0 bg-[radial-gradient(#d4af37_1px,transparent_1px)] [background-size:28px_28px] opacity-[0.07] pointer-events-none" />
        <div className="absolute -top-20 -right-20 w-80 h-80 bg-blue-600/15 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute -bottom-20 -left-20 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
        
        {/* Outer Gold Border Frame */}
        <div className="absolute inset-3 border border-amber-400/20 rounded-2xl pointer-events-none" />
        <div className="absolute inset-4 border border-white/5 rounded-xl pointer-events-none" />

        {/* Top Header */}
        <div className="relative z-10 flex items-center justify-between border-b border-white/10 pb-3">
          <div className="flex items-center gap-3">
            {logoUrl ? (
              <Image
                src={logoUrl}
                alt="Canina Pharma"
                width={120}
                height={40}
                className="h-9 w-auto object-contain shrink-0"
                unoptimized={typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'))}
              />
            ) : (
              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 text-slate-950 flex items-center justify-center font-black text-base shadow-lg font-mono">
                CANINA
              </div>
            )}
            <div>
              <span className="text-base sm:text-lg font-black font-lalezar tracking-wide text-white block">
                Canina Pharma Germany
              </span>
              <span className="text-[8px] sm:text-[9px] text-amber-300 font-bold uppercase tracking-widest block font-mono">
                🇩🇪 100% Made in Germany • Est. 1984
              </span>
            </div>
          </div>

          <div className="px-2.5 py-1 bg-white/10 rounded-full text-[9px] sm:text-[10px] font-bold text-amber-300 border border-amber-400/30 flex items-center gap-1.5 whitespace-nowrap">
            <Award className="w-3 h-3 text-amber-400 shrink-0" />
            <span>نسخه رسمی ۲۰۲۶</span>
          </div>
        </div>

        {/* Center Hero Title & Visual */}
        <div className="relative z-10 my-auto text-center space-y-3 py-1">
          
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-400/10 border border-amber-400/30 text-amber-300 text-[9px] sm:text-[10px] font-black whitespace-nowrap">
            <Sparkles className="w-3.5 h-3.5" />
            <span>OFFICIAL VETERINARY & CLINICAL CATALOG</span>
          </div>

          <div className="space-y-1.5">
            <h1 className="text-xl sm:text-2xl md:text-3xl font-black font-lalezar leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-100 via-white to-amber-300">
              کاتالوگ تخصصی و راهنمای بالینی مکمل‌های دارویی کنینا
            </h1>
            <p className="text-[10px] sm:text-[11px] text-slate-300 font-medium max-w-md mx-auto leading-relaxed">
              مرجع رسمی مکمل‌های درمانی حیوانات خانگی با استانداردهای داروسازی آلمان (GMP) و تاییدیه‌های ارتوپدی و پوست
            </p>
          </div>

          {/* Hero Render Frame: Brand Identity with dynamic logo */}
          <div className="pt-1 flex justify-center">
            <div className="w-36 h-36 md:w-44 md:h-44 rounded-2xl bg-gradient-to-b from-white/10 to-white/5 border border-white/15 backdrop-blur-md p-4 flex flex-col items-center justify-center shadow-2xl relative">
              {logoUrl ? (
                <Image
                  src={logoUrl}
                  alt="Canina Pharma"
                  width={140}
                  height={140}
                  className="max-h-16 w-auto object-contain mb-2 drop-shadow-xl"
                  unoptimized={typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'))}
                />
              ) : (
                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-amber-500 text-slate-950 flex items-center justify-center font-black text-2xl font-mono shadow-xl mb-2">
                  CANINA
                </div>
              )}
              <span className="text-base sm:text-lg font-black font-lalezar text-white tracking-wide">
                Canina Pharma
              </span>
              <span className="text-[8px] sm:text-[9px] text-amber-300 font-bold uppercase tracking-widest font-mono mt-0.5">
                Germany • Est. 1984
              </span>
              <div className="absolute -bottom-2.5 bg-gradient-to-r from-amber-400 to-amber-500 text-slate-950 font-black text-[8px] sm:text-[9px] px-3 py-0.5 rounded-full shadow-md whitespace-nowrap">
                Pharma Grade Certified
              </div>
            </div>
          </div>

          {/* Highlights Pills */}
          <div className="flex flex-wrap items-center justify-center gap-2 pt-1 text-[10px] text-slate-300">
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">🦴 مفاصل و اسکلت</span>
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">✨ پوست و مو</span>
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">🛡️ ایمنی و گوارش</span>
            <span className="bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg">⚡ ویتامین‌ها</span>
          </div>
        </div>

        {/* Bottom Footer */}
        <div className="relative z-10 border-t border-white/10 pt-3 flex items-center justify-between text-[10px] text-slate-400 font-bold">
          <div className="flex items-center gap-1.5">
            <ShieldCheck className="w-3.5 h-3.5 text-amber-400" />
            <span>نمایندگی انحصاری Canina Pharma Germany در ایران</span>
          </div>
          <span className="font-mono text-slate-400">صفحه ۰۱</span>
        </div>
      </div>
    );
  }

  // ==========================================
  // 2. TABLE OF CONTENTS (فهرست دسته‌بندی‌ها)
  // ==========================================
  if (pageType === "toc") {
    return (
      <div className="w-full h-full bg-slate-50 text-slate-800 p-5 md:p-7 flex flex-col justify-between select-none box-border" dir="rtl">
        {/* TOC Header */}
        <div className="border-b border-slate-200 pb-3 flex items-center justify-between shrink-0">
          <div>
            <div className="flex items-center gap-1.5 text-[10px] font-black text-canina-blue uppercase tracking-widest">
              <BookOpen className="w-3.5 h-3.5" />
              <span>فهرست تخصصی و راهنمای بالینی</span>
            </div>
            <h2 className="text-xl md:text-2xl font-black font-lalezar text-slate-900 mt-0.5">
              دسته‌بندی‌های کاتالوگ دارویی
            </h2>
          </div>
          <div className="text-left">
            <span className="text-[10px] font-black text-slate-400 block font-mono">CANINA PHARMA</span>
            <span className="text-[9px] font-bold text-amber-600 uppercase">Germany</span>
          </div>
        </div>

        {/* Categories List (Compact luxury layout, perfectly fitted) */}
        <div className="my-auto space-y-2.5 py-2 flex-1 flex flex-col justify-center min-h-0">
          {categoriesList.map((cat, idx) => {
            const IconComp = cat.icon;
            return (
              <div
                key={cat.id}
                onClick={() => onJumpToPage && onJumpToPage(cat.startPage)}
                className="bg-white border border-slate-200/90 hover:border-slate-300 rounded-xl p-2.5 sm:p-3 flex items-center justify-between gap-3 shadow-2xs hover:shadow-md transition-all cursor-pointer group"
              >
                <div className="flex items-center gap-3 min-w-0">
                  {/* Category Color Icon */}
                  <div
                    className="w-9 h-9 rounded-lg flex items-center justify-center text-white font-black shadow-xs shrink-0 group-hover:scale-105 transition-transform"
                    style={{ backgroundColor: cat.color }}
                  >
                    <IconComp className="w-4 h-4" />
                  </div>

                  <div className="min-w-0">
                    <div className="flex items-center gap-1.5">
                      <span className="text-[9px] font-black text-slate-400 font-mono">
                        SECTION 0{idx + 1}
                      </span>
                      <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: cat.color }} />
                    </div>
                    <h3 className="text-xs sm:text-sm font-black text-slate-900 group-hover:text-canina-blue transition-colors font-vazir truncate">
                      {cat.name}
                    </h3>
                    <p className="text-[10px] text-slate-500 font-medium truncate mt-0.5">
                      {cat.tagline}
                    </p>
                  </div>
                </div>

                <div className="flex items-center gap-2 shrink-0">
                  <div className="text-left">
                    <span className="text-[8px] text-slate-400 font-bold block">صفحه</span>
                    <span className="text-xs font-black text-slate-900 font-mono">
                      {cat.startPage < 10 ? `۰${cat.startPage}` : cat.startPage}
                    </span>
                  </div>
                  <div className="w-6 h-6 rounded-full bg-slate-100 group-hover:bg-canina-blue group-hover:text-white text-slate-400 flex items-center justify-center transition-colors">
                    <ChevronLeft className="w-3.5 h-3.5" />
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Quality Seal Note */}
        <div className="bg-amber-50/70 border border-amber-200/60 rounded-xl p-2.5 flex items-center gap-2.5 shrink-0">
          <Award className="w-4 h-4 text-amber-600 shrink-0" />
          <p className="text-[10px] text-amber-900 font-bold leading-relaxed">
            تمامی فرآورده‌های کنینا آلمان مطابق با مونوگراف‌های دارویی فارماکوپه اروپا (Ph. Eur.) و تحت استاندارد GMP تولید می‌شوند.
          </p>
        </div>

        {/* TOC Footer */}
        <div className="border-t border-slate-200 pt-2 flex items-center justify-between text-[10px] text-slate-400 font-bold shrink-0">
          <span>راهنمای جامع کاتالوگ دارویی Canina Pharma</span>
          <span className="font-mono">صفحه ۰۲</span>
        </div>
      </div>
    );
  }

  // ==========================================
  // 3. LUXURY BACK COVER (شناسنامه پشت جلد)
  // ==========================================
  if (pageType === "backcover") {
    return (
      <div className="w-full h-full bg-gradient-to-br from-slate-950 via-[#0a192f] to-[#040d1a] text-white p-6 md:p-8 flex flex-col justify-between relative overflow-hidden select-none box-border" dir="rtl">
        <div className="absolute inset-3 border border-amber-400/20 rounded-2xl pointer-events-none" />
        <div className="absolute -top-24 -left-24 w-80 h-80 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />

        <div className="relative z-10 border-b border-white/10 pb-3 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Award className="w-4 h-4 text-amber-400" />
            <span className="text-[10px] font-black uppercase tracking-widest text-amber-400">شناسنامه و استانداردهای دارویی</span>
          </div>
          <span className="text-[10px] font-mono text-slate-400">صفحه {totalPages}</span>
        </div>

        <div className="relative z-10 my-auto space-y-5 text-center max-w-sm mx-auto">
          <div className="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-amber-400 to-amber-500 text-slate-950 flex items-center justify-center font-black text-2xl shadow-xl font-mono">
            CP
          </div>

          <div className="space-y-1">
            <h2 className="text-2xl font-black font-lalezar text-white">Canina Pharma GmbH</h2>
            <p className="text-[10px] text-slate-400 font-mono">Made in Germany • Quality Guarantee</p>
          </div>

          {/* Credentials Card */}
          <div className="grid grid-cols-2 gap-3 text-right bg-white/5 border border-white/10 p-4 rounded-xl text-[10px] space-y-1">
            <div>
              <span className="text-slate-400 block">کشور سازنده:</span>
              <span className="font-black text-amber-300 font-mono">Germany (آلمان)</span>
            </div>
            <div>
              <span className="text-slate-400 block">گواهی کیفیت:</span>
              <span className="font-black text-amber-300 font-mono">GMP & Vet Certified</span>
            </div>
            <div>
              <span className="text-slate-400 block">وبسایت بین‌المللی:</span>
              <span className="font-black text-white font-mono">canina.de</span>
            </div>
            <div>
              <span className="text-slate-400 block">واردکننده انحصاری:</span>
              <span className="font-black text-white">کنینا فارما ایران</span>
            </div>
          </div>

          <div className="flex items-center justify-center gap-3 text-[10px] text-slate-400">
            <span className="flex items-center gap-1"><Check className="w-3 h-3 text-emerald-400" /> ۱۰۰٪ طبیعی</span>
            <span className="flex items-center gap-1"><Check className="w-3 h-3 text-emerald-400" /> بدون افزودنی شیمیایی</span>
            <span className="flex items-center gap-1"><Check className="w-3 h-3 text-emerald-400" /> بدون تست روی حیوانات</span>
          </div>
        </div>

        <div className="relative z-10 border-t border-white/10 pt-3 text-center text-[9px] text-slate-500 font-mono">
          © 2026 Canina Pharma GmbH. All Rights Reserved.
        </div>
      </div>
    );
  }

  // ==========================================
  // 4. DEDICATED 1-PAGE LUXURY PRODUCT PRESENTATION
  // (صفحه اختصاصی و لوکس هر محصول)
  // ==========================================
  if (!product) return null;

  const formBadge = getFormBadge(product.unit, product.name);
  const speciesBadge = getSpeciesBadge(product.suitableFor);
  const FormIcon = formBadge.icon;
  const SpeciesIcon = speciesBadge.icon;
  const themeColor = categoryMeta?.color || "#0284C7";

  return (
    <div className="w-full h-full bg-gradient-to-b from-slate-50 via-white to-slate-50 text-slate-800 p-4 sm:p-5 md:p-6 flex flex-col justify-between select-none box-border overflow-hidden relative" dir="rtl">
      {/* Decorative luxury gradient tint border on top edge */}
      <div 
        className="absolute top-0 right-0 left-0 h-1.5 opacity-80" 
        style={{ backgroundColor: themeColor }}
      />
      
      {/* 1. Header Bar: Category, Species, Form, ArtNo */}
      <div className="border-b border-slate-200/80 pb-2 flex items-center justify-between gap-2 shrink-0 pt-0.5">
        
        {/* Category Pill */}
        <div className="flex items-center gap-1.5 min-w-0">
          <span 
            className="w-2.5 h-2.5 rounded-full shrink-0 shadow-2xs" 
            style={{ backgroundColor: themeColor }}
          />
          <span className="text-[10px] sm:text-[11px] font-black uppercase tracking-wider text-slate-800 font-vazir truncate whitespace-nowrap">
            {product.category}
          </span>
        </div>

        {/* Product Badges (Strictly whitespace-nowrap) */}
        <div className="flex items-center gap-1 sm:gap-1.5 text-[9px] font-bold shrink-0">
          <span className="bg-white text-slate-700 px-2 py-0.5 rounded-md flex items-center gap-1 border border-slate-200 shadow-3xs whitespace-nowrap">
            <SpeciesIcon className="w-3 h-3 text-slate-500 shrink-0" />
            <span className="whitespace-nowrap">{speciesBadge.label}</span>
          </span>
          <span className="bg-white text-slate-700 px-2 py-0.5 rounded-md flex items-center gap-1 border border-slate-200 shadow-3xs whitespace-nowrap">
            <FormIcon className="w-3 h-3 text-slate-500 shrink-0" />
            <span className="whitespace-nowrap">{formBadge.label}</span>
          </span>
          <span className="bg-blue-50/90 text-canina-blue font-mono px-2 py-0.5 rounded-md border border-blue-100/90 whitespace-nowrap font-bold">
            Art-Nr: {product.artNo}
          </span>
        </div>
      </div>

      {/* 2. Main Body Content (Luxury grid fitted strictly without overflow) */}
      <div className="flex-1 min-h-0 flex flex-col justify-between py-1.5 space-y-1.5">
        
        {/* Top Product Hero Showcase (Image + Titles + Special Badge) */}
        <div className="flex items-center gap-3 bg-white border border-slate-200/90 rounded-2xl p-2.5 shrink-0 shadow-2xs relative overflow-hidden">
          <div 
            className="absolute -top-8 -right-8 w-24 h-24 rounded-full opacity-10 blur-xl pointer-events-none" 
            style={{ backgroundColor: themeColor }}
          />
          
          {/* Studio Image Box */}
          <div className="w-20 h-20 sm:w-24 sm:h-24 bg-slate-50/80 rounded-xl border border-slate-200/70 p-1.5 flex items-center justify-center shrink-0 relative shadow-inner">
            <SafeImage
              src={product.image}
              alt={product.name}
              className="w-full h-full"
              imgClassName="object-contain max-h-16 sm:max-h-20 filter drop-shadow-md"
            />
            {product.unit && (
              <span className="absolute bottom-1 right-1 bg-slate-900/90 text-white font-mono text-[7px] sm:text-[8px] font-bold px-1.5 py-0.2 rounded shadow-2xs whitespace-nowrap">
                {product.unit}
              </span>
            )}
          </div>

          {/* Title & Scientific Tagline */}
          <div className="min-w-0 flex-1 space-y-0.5">
            {product.specialBadge && (
              <span 
                className="text-[8px] font-black px-2 py-0.5 rounded-full text-white inline-block shadow-2xs whitespace-nowrap mb-0.5"
                style={{ backgroundColor: themeColor }}
              >
                ★ {product.specialBadge}
              </span>
            )}
            <h2 className="text-sm sm:text-base font-black text-slate-900 font-vazir leading-tight truncate">
              {product.name}
            </h2>
            {product.scientificTagline && (
              <p className="text-[9px] sm:text-[10px] text-slate-600 font-bold italic truncate">
                {product.scientificTagline}
              </p>
            )}
            <p className="text-[9px] text-slate-500 font-medium line-clamp-2 leading-relaxed text-justify">
              {product.shortDescription || product.description}
            </p>
          </div>
        </div>

        {/* Clinical Indications & Symptoms */}
        {product.symptoms && product.symptoms.length > 0 && (
          <div className="space-y-1 shrink-0">
            <span className="text-[8px] font-black text-slate-400 uppercase tracking-widest block whitespace-nowrap">
              موارد مصرف و نشانه‌های بالینی:
            </span>
            <div className="flex flex-wrap gap-1">
              {product.symptoms.slice(0, 4).map((symptom, i) => (
                <span 
                  key={i} 
                  className="bg-red-50 text-red-900 border border-red-200/80 rounded-md px-1.5 py-0.5 text-[8.5px] font-bold whitespace-nowrap shadow-3xs"
                >
                  • {symptom}
                </span>
              ))}
            </div>
          </div>
        )}

        {/* Active Ingredients & Composition Table */}
        {product.main_ingredients && product.main_ingredients.length > 0 && (
          <div className="bg-slate-50/90 border border-slate-200/80 rounded-xl p-2 space-y-1 shrink-0">
            <div className="flex items-center gap-1 text-[8.5px] font-black text-canina-blue uppercase whitespace-nowrap">
              <Layers className="w-3 h-3 shrink-0" />
              <span>ترکیبات موثره و فرمولاسیون دارویی:</span>
            </div>
            <div className="flex flex-wrap gap-1">
              {product.main_ingredients.slice(0, 4).map((ing, idx) => (
                <span
                  key={idx}
                  className="bg-white text-slate-800 border border-slate-200 rounded px-1.5 py-0.5 text-[8.5px] font-bold shadow-3xs whitespace-nowrap"
                >
                  {ing}
                </span>
              ))}
            </div>
          </div>
        )}

        {/* Clinical Dosage Protocol */}
        {product.dosage_logic && (
          <div className="bg-amber-50/80 border border-amber-200/80 rounded-xl p-2 space-y-0.5 shrink-0">
            <div className="flex items-center gap-1 text-amber-900 font-black text-[8.5px] whitespace-nowrap">
              <ShieldCheck className="w-3 h-3 text-amber-600 shrink-0" />
              <span>پروتکل بالینی تجویز و دوز مصرف:</span>
            </div>
            <p className="text-[8.5px] text-amber-950 font-bold leading-relaxed line-clamp-2">
              {product.dosage_logic}
            </p>
          </div>
        )}

        {/* Specialist Endorsement */}
        {product.specialist && (
          <div className="bg-white border border-slate-200/80 rounded-xl p-2 flex items-center gap-2 shrink-0 shadow-3xs">
            <div className="w-7 h-7 rounded-full bg-canina-blue/10 border border-canina-blue/20 text-canina-blue flex items-center justify-center font-black text-xs font-mono shadow-3xs shrink-0">
              <Stethoscope className="w-3.5 h-3.5" />
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-1 truncate">
                <span className="text-[8.5px] font-black text-slate-900 truncate">{product.specialist.name}</span>
                <span className="text-[7.5px] text-slate-500 truncate font-medium">({product.specialist.title})</span>
              </div>
              <p className="text-[8px] text-slate-600 italic truncate mt-0.2">
                «{product.specialist.message}»
              </p>
            </div>
          </div>
        )}

      </div>

      {/* 3. Page Footer */}
      <div className="border-t border-slate-200/80 pt-1.5 flex items-center justify-between text-[8.5px] text-slate-400 font-bold shrink-0">
        <div className="flex items-center gap-1.5 whitespace-nowrap">
          <Award className="w-3 h-3 text-amber-500 shrink-0" />
          <span>Canina Pharma Germany • استانداردهای بالینی GMP</span>
        </div>
        <span className="font-mono text-slate-600 bg-slate-100 px-2 py-0.2 rounded-md whitespace-nowrap font-bold">
          صفحه {pageNumber < 10 ? `۰${pageNumber}` : pageNumber} از {totalPages}
        </span>
      </div>

    </div>
  );
}