import { getMarketplaceStoreBySlug, getMarketplaceProductsByStore } from "@/lib/marketplace-data";
import { ProductGrid } from "@/components/ProductGrid";
import { notFound } from "next/navigation";
import { Store } from "lucide-react";

export const revalidate = 60;

export default async function LojaSlugPage(props: { params: Promise<{ slug: string }> }) {
  const params = await props.params;
  const store = await getMarketplaceStoreBySlug(params.slug);
  
  if (!store) {
    return notFound();
  }

  const products = await getMarketplaceProductsByStore(store.id, 50);

  return (
    <div className="bg-gray-50 min-h-screen pb-16">
      {/* Store Header Banner */}
      <div className="h-48 lg:h-64 bg-gray-200 w-full relative">
        <img 
          src={'https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=1200&auto=format&fit=crop'} 
          alt={`Banner da loja ${store.name}`} 
          className="w-full h-full object-cover"
        />
      </div>

      <div className="container mx-auto px-4 lg:px-8 -mt-16 relative z-10">
        <div className="bg-white rounded-3xl p-6 lg:p-8 shadow-sm border border-gray-100 flex flex-col sm:flex-row gap-6 items-start sm:items-center">
          <div className="w-24 h-24 sm:w-32 sm:h-32 bg-white rounded-2xl p-1 shadow-md flex-shrink-0">
            <div className="w-full h-full rounded-xl bg-gray-100 flex items-center justify-center overflow-hidden border border-gray-100">
              {store.logoUrl ? (
                <img src={store.logoUrl} alt={store.name} className="w-full h-full object-cover" />
              ) : (
                <Store className="w-12 h-12 text-gray-400" />
              )}
            </div>
          </div>
          
          <div className="flex-1">
            <h1 className="text-3xl font-extrabold text-gray-900 mb-2">{store.name}</h1>
            <p className="text-gray-500 mb-4">Brasil</p>
            <div className="flex flex-wrap gap-3">
              <a href={store.publicUrl} target="_blank" rel="noopener noreferrer" className="px-5 py-2 bg-violet-600 text-white rounded-full font-medium hover:bg-violet-700 transition-colors">
                Visitar site da loja
              </a>
            </div>
          </div>
        </div>
      </div>

      <div className="pt-12">
        <ProductGrid 
          products={products} 
          title="Produtos da Loja" 
          subtitle={`Explore o catálogo completo de ${store.name}`}
          icon={<Store className="w-6 h-6 text-violet-600" />}
        />
      </div>
    </div>
  );
}