Vendor Marketplace

import { useState } from 'react';
import { DataGrid, CardIcon, CardMedia, Carousel, PillBadge, Modal, ReviewModal, CreditCardInput, StarRating } from '@cleen/cleen-components';
import { useVendors, useSubscribe } from '@/hooks/useVendorCatalog';

export function VendorCatalog() {
  const { vendors, loading } = useVendors();
  const subscribe = useSubscribe();
  const [reviewing, setReviewing]   = useState(null);
  const [purchasing, setPurchasing] = useState(null);

  return (
    <div className="vendor-catalog">
      <DataGrid
        loading={loading}
        rows={vendors}
        columns={[
          { key: 'logo',   label: '',         render: (v) => <CardMedia src={v.logoUrl} /> },
          { key: 'name',   label: 'Vendor',   render: (v) => <CardIcon icon={v.icon} title={v.name} description={v.tagline} /> },
          { key: 'rating', label: 'Rating',   render: (v) => <StarRating value={v.rating} readonly /> },
          { key: 'tier',   label: 'Tier',     render: (v) => <PillBadge>{v.tier}</PillBadge> },
          { key: 'price',  label: 'Price',    align: 'right' },
        ]}
        onRowClick={setPurchasing}
      />
      <Carousel items={vendors.filter((v) => v.featured)} render={(v) => <CardMedia src={v.heroUrl} title={v.name} />} />
      <ReviewModal isOpen={!!reviewing} vendor={reviewing} onClose={() => setReviewing(null)} />
      <Modal isOpen={!!purchasing} onClose={() => setPurchasing(null)} title={`Subscribe to ${purchasing?.name}`}>
        <CreditCardInput onSubmit={(card) => subscribe({ vendorId: purchasing.id, card })} />
      </Modal>
    </div>
  );
}