/**
 * ListingCard component for displaying storefront listings
 *
 * This is a framework-agnostic component definition that can be
 * adapted to React, Vue, Svelte, or vanilla JS implementations.
 *
 * @example React implementation:
 * ```tsx
 * import { ListingCardProps } from 'sdn-js/storefront/components';
 *
 * export function ListingCard({ listing, onViewSample, onSubscribe }: ListingCardProps) {
 *   return (
 *     <div className="listing-card">
 *       <h3>{listing.title}</h3>
 *       <p>{listing.description}</p>
 *       // ...
 *     </div>
 *   );
 * }
 * ```
 */
import type { Listing, PricingTier, PaymentMethod, AccessType } from '../types';
/** Props for the ListingCard component */
export interface ListingCardProps {
    /** The listing to display */
    listing: Listing;
    /** Callback when user clicks "View Sample" */
    onViewSample?: (listing: Listing) => void;
    /** Callback when user clicks "Subscribe" or "Purchase" */
    onSubscribe?: (listing: Listing, tier: PricingTier) => void;
    /** Callback when user clicks on the listing for details */
    onViewDetails?: (listing: Listing) => void;
    /** Whether to show the full description or truncated */
    expanded?: boolean;
    /** Custom CSS class name */
    className?: string;
}
/** Format a price for display */
export declare function formatPrice(tier: PricingTier): string;
/** Format access type for display */
export declare function formatAccessType(accessType: AccessType): string;
/** Format duration for display */
export declare function formatDuration(days: number): string;
/** Get payment method icon/label */
export declare function formatPaymentMethod(method: PaymentMethod): string;
/** Calculate star rating display */
export declare function formatRating(rating: number): {
    full: number;
    half: boolean;
    empty: number;
};
/**
 * Default listing card template (HTML string for reference)
 *
 * This provides a reference implementation that can be adapted to any framework.
 */
export declare function renderListingCardHTML(listing: Listing): string;
/**
 * Default CSS styles for the listing card
 */
export declare const listingCardStyles = "\n.listing-card {\n  border: 1px solid #2a2a3a;\n  border-radius: 8px;\n  padding: 16px;\n  background: #1a1a2e;\n  color: #e0e0e0;\n  max-width: 400px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.listing-card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 8px;\n}\n\n.listing-title {\n  font-size: 1.1rem;\n  font-weight: 600;\n  margin: 0;\n  color: #ffffff;\n}\n\n.listing-access-type {\n  font-size: 0.75rem;\n  padding: 2px 8px;\n  border-radius: 4px;\n  background: #3a3a5a;\n  color: #a0a0c0;\n}\n\n.listing-provider {\n  font-size: 0.85rem;\n  color: #a0a0a0;\n  margin-bottom: 12px;\n}\n\n.listing-rating {\n  color: #ffd700;\n  margin-left: 8px;\n}\n\n.listing-data-types {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 12px;\n}\n\n.data-type-tag {\n  font-size: 0.75rem;\n  padding: 2px 8px;\n  border-radius: 4px;\n  background: #2a4a6a;\n  color: #8ac0ff;\n}\n\n.listing-coverage {\n  font-size: 0.85rem;\n  color: #b0b0b0;\n  margin-bottom: 12px;\n  padding: 8px;\n  background: #0a0a1a;\n  border-radius: 4px;\n}\n\n.listing-pricing {\n  font-size: 1rem;\n  margin-bottom: 12px;\n}\n\n.price-from {\n  color: #808080;\n  font-size: 0.85rem;\n}\n\n.price-amount {\n  font-weight: 700;\n  color: #00ff88;\n  margin: 0 4px;\n}\n\n.price-duration {\n  color: #808080;\n  font-size: 0.85rem;\n}\n\n.listing-actions {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.listing-actions button {\n  flex: 1;\n  padding: 8px 16px;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  font-weight: 500;\n  transition: background 0.2s;\n}\n\n.btn-primary {\n  background: #0066cc;\n  color: white;\n}\n\n.btn-primary:hover {\n  background: #0077ee;\n}\n\n.btn-secondary {\n  background: #3a3a5a;\n  color: #e0e0e0;\n}\n\n.btn-secondary:hover {\n  background: #4a4a6a;\n}\n\n.listing-payment-methods {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n}\n\n.payment-method {\n  font-size: 0.7rem;\n  padding: 2px 6px;\n  border-radius: 3px;\n  background: #2a2a3a;\n  color: #909090;\n}\n";
//# sourceMappingURL=ListingCard.d.ts.map