import React from 'react';
import ProductGrid from './ProductGrid';
import { Product, SiteSettings } from '../types';

interface TrendingPageProps {
  theme?: string;
  products: Product[];
  settings?: SiteSettings;
  onSelectProduct: (p: Product) => void;
  onAddToCart: (p: Product) => void;
}

const TrendingPage: React.FC<TrendingPageProps> = ({ theme = '01', products, settings, onSelectProduct, onAddToCart }) => {
  let homeConfig: import('../types').HomePageConfig | null = null;
  if (settings?.homePageJson) {
    try { homeConfig = JSON.parse(settings.homePageJson); } catch (e) {}
  }

  const trendingBanners = homeConfig?.theme01?.trendingBanners || [];
  const trendingProducts = products.filter(p => p.isFeatured);

  return (
    <div className="min-h-screen bg-white dark:bg-slate-900 pb-24 animate-fade-in-up font-sans">

      {/* Hero */}
      <div className={`py-8 md:py-16 mb-6 md:mb-8 shadow-sm relative overflow-hidden ${theme === '01' ? 'bg-themePrimary md:rounded-b-[40px]' : 'bg-slate-50 dark:bg-slate-800 border-b border-themePrimary/10'}`}>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className={`text-2xl md:text-5xl font-black mb-2 md:mb-4 tracking-tight font-bangla ${theme === '01' ? 'text-white drop-shadow-md' : 'text-slate-800 dark:text-white'}`}>
            ট্রেন্ডিং প্রোডাক্টস 🚀
          </h1>
          <p className={`text-sm md:text-lg font-bangla max-w-xl mx-auto hidden md:block ${theme === '01' ? 'text-white/90' : 'text-slate-500'}`}>
            আমাদের সবচেয়ে জনপ্রিয় এবং সবচেয়ে বেশি বিক্রি হওয়া পণ্যগুলো এক নজরে দেখুন।
          </p>
        </div>
      </div>

      {/* Banners — horizontal scroll on mobile */}
      {trendingBanners.length > 0 && (
        <div className="px-3 md:container md:mx-auto md:px-4 mb-6 md:mb-12">
          <div className="flex md:grid md:grid-cols-3 gap-3 overflow-x-auto no-scrollbar pb-1">
            {trendingBanners.map((banner: any, index: number) => (
              <div key={index} className="flex-shrink-0 w-72 md:w-auto aspect-[16/9] rounded-2xl overflow-hidden shadow-sm cursor-pointer group">
                <img
                  src={banner.image}
                  alt={`Trending Banner ${index + 1}`}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Products */}
      <div className="container mx-auto px-3 md:px-4 max-w-[1300px]">
        {trendingProducts.length > 0 ? (
          <ProductGrid
            products={trendingProducts}
            onSelect={onSelectProduct}
            addToCart={onAddToCart}
          />
        ) : (
          <div className="py-16 text-center">
            <div className="inline-block p-5 bg-slate-50 rounded-full mb-4">
              <span className="text-4xl">😲</span>
            </div>
            <h3 className="text-xl font-bold text-slate-800 dark:text-white mb-2 font-bangla">কোনো ট্রেন্ডিং পণ্য নেই</h3>
            <p className="text-slate-400 text-sm font-bangla">পণ্য Featured করলে এখানে দেখাবে।</p>
          </div>
        )}
      </div>

    </div>
  );
};

export default TrendingPage;
