import healthBeautyProduct from "@/models/healthBeautyProduct "
import Image from "next/image"
import Link from "next/link"
import { slugify } from '@/lib/utl/slugify'
const MostViewProductsHealthBeauty = async () => {
  const CatId = '6436f628729f9d9140060c86'
  
  // اصلاح و تمیزتر کردن کوئری دیتابیس
  const products = await healthBeautyProduct
    .find({ category: CatId })
    .select("title productListImg price")
    .sort({ view: -1 })
    .limit(12);

  // در صورت خالی بودن دیتابیس
  if (!products || products.length === 0) return null;

  return (
    // کانتینر اصلی
    <div className="w-full max-w-7xl mx-auto px-4 pt-8 pb-0">
      {/* عنوان بخش */}
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-[0.95rem] md:text-2xl font-bold text-slate-800">پربازدیدترین‌های آرایشی و بهداشتی</h2>
        <span className="h-[2px] flex-1 bg-slate-100 mx-4 rounded-full"></span>
      </div>

      {/* تغییرات اعمال شده: تبدیل grid به flex و اضافه کردن قابلیت اسکرول افقی */}
      <div 
        className="flex overflow-x-auto gap-3 sm:gap-4 md:gap-5 pb-0 snap-x snap-mandatory scroll-smooth" 
        style={{ scrollbarWidth: 'none' /* مخفی کردن نوار اسکرول */ }}
      >
        {products.map((product) => {
          // فرمت کردن قیمت به صورت استاندارد با اعداد فارسی
          const formattedPrice = new Intl.NumberFormat('fa-IR').format(product.price);
          // ساخت URL تمیز
          const productUrl = `/product/${product._id}/${slugify(product.title)}`;

          return (
            <Link 
              href={productUrl} 
              key={product._id}
              // تغییرات اعمال شده: اضافه کردن عرض ثابت، shrink-0 و snap-start برای اسکرول افقی
              className="group flex flex-col w-[160px] sm:w-[200px] md:w-[220px] shrink-0 snap-start bg-white rounded-2xl p-3 transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] hover:-translate-y-1 border border-slate-100 hover:border-blue-100/50 relative overflow-hidden"
            >
              {/* بخش عکس کالا */}
              <div className="relative w-full aspect-square bg-slate-50/50 rounded-xl flex items-center justify-center p-2 mb-3 overflow-hidden">
                <Image 
                  src={`https://www.atenakala.com/${product.productListImg}`} 
                  alt={product.title} 
                  fill
                  sizes="(max-width: 768px) 160px, (max-width: 1200px) 200px, 220px"
                  className="object-contain drop-shadow-sm transition-transform duration-500 group-hover:scale-110" 
                />
              </div>

              {/* عنوان کالا */}
              <h3 className="text-slate-700 text-xs sm:text-sm font-medium leading-relaxed line-clamp-2 mb-auto transition-colors group-hover:text-blue-600">
                {product.title}
              </h3>

              {/* بخش قیمت */}
              <div className="mt-4 flex items-center justify-end gap-1.5">
                <span className="text-base sm:text-lg font-bold text-slate-800 tracking-tight">
                  {formattedPrice}
                </span>
                <span className="text-[10px] sm:text-xs text-slate-400 font-normal">
                  تومان
                </span>
              </div>
              
              {/* افکت شیشه‌ای بسیار ملایم روی کارت هنگام هاور */}
              <div className="absolute inset-0 bg-gradient-to-tr from-blue-50/0 to-blue-50/0 group-hover:from-blue-50/20 transition-all duration-500 pointer-events-none rounded-2xl"></div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}

export default MostViewProductsHealthBeauty;