import Link from 'next/link';
import type { Brand } from '@/types/api';
import { fetchBrands } from '@/lib/api';

export default async function BrandsSection() {
  const brands = await fetchBrands();

  if (brands.length === 0) return null;

  return (
    <section className="py-16 bg-white border-t border-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">Nuestras marcas</h2>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
          {brands.map((brand) => (
            <Link key={brand.id} href={`/brands/${brand.slug}`}>
              <div className="p-4 rounded-xl border border-gray-200 hover:border-[#70ad47] transition-all hover:shadow-md bg-gray-50 text-center">
                <div className="w-12 h-12 mx-auto mb-2 bg-[#70ad47]/10 rounded-full flex items-center justify-center">
                  <span className="text-[#70ad47] font-bold text-sm">{brand.name.slice(0, 2).toUpperCase()}</span>
                </div>
                <p className="font-medium text-gray-900 text-sm">{brand.name}</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}
