import Link from "next/link";
import { Store, Star, ArrowRight } from "lucide-react";
import type { MarketplaceStoreSummary } from "@/lib/marketplace-data";

interface FeaturedStoresProps {
  stores: MarketplaceStoreSummary[];
}

export function FeaturedStores({ stores }: FeaturedStoresProps) {
  if (!stores || stores.length === 0) return null;

  return (
    <section className="py-12">
      <div className="container mx-auto px-4 lg:px-8">
        
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8">
          <div>
            <div className="flex items-center gap-2 mb-2">
              <Store className="w-6 h-6 text-violet-600" />
              <h2 className="text-2xl font-bold text-gray-900">Lojas em destaque</h2>
            </div>
            <p className="text-gray-500">Conheça alguns dos nossos assinantes</p>
          </div>
          <Link href="/lojas" className="flex items-center gap-2 text-violet-600 font-medium hover:text-violet-700 transition-colors">
            Ver todas as lojas
            <ArrowRight className="w-4 h-4" />
          </Link>
        </div>

        {/* Stores Grid */}
        <div className="flex overflow-x-auto lg:grid lg:grid-cols-4 gap-6 pb-4 scrollbar-hide snap-x" style={{ scrollbarWidth: 'none' }}>
          {stores.slice(0, 4).map((store) => (
            <div key={store.id} className="flex-shrink-0 w-[280px] lg:w-auto snap-start bg-white border border-gray-100 rounded-3xl overflow-hidden hover:shadow-lg transition-all group">
              {/* Banner */}
              <div className="h-32 bg-gray-200 w-full relative">
                <img 
                  src={'https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=600&auto=format&fit=crop'} 
                  alt={`Banner da loja ${store.name}`} 
                  className="w-full h-full object-cover"
                />
              </div>
              
              <div className="px-5 pb-5 relative">
                {/* Avatar */}
                <div className="absolute -top-10 left-5 w-20 h-20 bg-white rounded-2xl p-1 shadow-sm">
                  <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-8 h-8 text-gray-400" />
                    )}
                  </div>
                </div>

                <div className="pt-12">
                  <h3 className="font-bold text-lg text-gray-900 truncate">
                    {store.name}
                  </h3>
                  <p className="text-sm text-gray-500 mb-4 truncate">
                    Brasil
                  </p>
                  
                  <div className="flex items-center justify-between mt-auto">
                    <div className="flex items-center gap-1.5 text-sm font-medium text-gray-700">
                      <Star className="w-4 h-4 fill-amber-400 text-amber-400" />
                      4.9 <span className="text-gray-400 font-normal">(256)</span>
                    </div>
                    <Link 
                      href={`/lojas/${store.slug}`}
                      className="px-4 py-1.5 rounded-full border border-violet-200 text-violet-600 text-sm font-semibold hover:bg-violet-50 transition-colors"
                    >
                      Seguir
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}