import { VendorCard } from '../components/VendorCard'

interface Vendor {
  name?: string
  description?: string
  products?: string[]
}

interface VendorsProps {
  vendors?: Vendor[]
  onVendorLearnMore?: (vendorName?: string) => void
}

export function Vendors({ vendors, onVendorLearnMore }: VendorsProps) {
  if (vendors && vendors.length > 0) {
    return (
      <div className="max-w-400 mx-auto px-6 xl:px-12 2xl:px-16 py-20">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {vendors.map(({ name, description, products }, index) => (
            <VendorCard
              key={index}
              name={name}
              description={description}
              products={products}
              onLearnMore={onVendorLearnMore}
            />
          ))}
        </div>
      </div>
    )
  }
}