import React from 'react';
import { type CardProps } from './Card';
import { type BadgeVariant } from '../Badge/Badge';
import type { IconName } from '../../tokens/icons';
export interface SummaryCardImage {
    src: string;
    alt: string;
    /**
     * Enable lazy loading for this specific image
     * @default true
     */
    lazy?: boolean;
}
/**
 * Metadata item for SummaryCard
 *
 * @example
 * ```tsx
 * // Using library icons
 * const metadata: SummaryCardMetadata[] = [
 *   { icon: 'clock', label: '10 min read' },
 *   { icon: 'calendar-today', label: 'Oct 30, 2025' }
 * ];
 *
 * // Using custom icons (React elements)
 * const metadata: SummaryCardMetadata[] = [
 *   { icon: <BedIcon size={16} />, label: '5 bedrooms' },
 *   { icon: <svg>...</svg>, label: 'Custom' }
 * ];
 * ```
 */
export interface SummaryCardMetadata {
    /**
     * Icon to display - can be a library icon name (IconName union) or custom React element
     */
    icon?: IconName | React.ReactElement;
    /**
     * Label text to display next to the icon
     */
    label: string;
    /**
     * Separator to display after this item (e.g., "•", "|")
     * Not displayed for the last item
     * @default undefined
     */
    separator?: string;
}
export interface SummaryCardProps extends Omit<CardProps, 'children'> {
    /**
     * Single image or array of 1-3 images.
     * Single image will be displayed large, 3 images in a grid.
     */
    images?: string | SummaryCardImage | Array<string | SummaryCardImage>;
    /**
     * Main title using heading3 typography.
     */
    title?: string;
    /**
     * Subtitle using bodySmall typography.
     */
    subtitle?: string;
    /**
     * Badge content (e.g., rating like "9.2").
     */
    badge?: string | number;
    /**
     * Badge variant.
     * @default 'default'
     */
    badgeVariant?: BadgeVariant;
    /**
     * Card variant
     * - "default": Standard card with padding and elevation
     * - "flat": Edge-to-edge layout with no padding or elevation
     * @default "default"
     */
    variant?: 'default' | 'flat';
    /**
     * Card size/density
     * - "default": Spacious layout, heading3 title, bodySmall subtitle
     * - "compact": Dense layout, bodyEmph title, caption subtitle (DiscoveryCard style)
     * @default "default"
     */
    size?: 'default' | 'compact';
    /**
     * Image aspect ratio for single images
     * - "auto": Natural aspect ratio (current behavior)
     * - "16/9": Widescreen
     * - "4/3": Classic (DiscoveryCard default)
     * - "1/1": Square
     * @default "auto"
     */
    imageAspectRatio?: 'auto' | '16/9' | '4/3' | '1/1';
    /**
     * Description text using bodySmall with secondary color.
     */
    description?: string;
    /**
     * Number of lines to display for description text
     * Applies line-clamp to actual content and determines skeleton line count
     * @default 2
     */
    descriptionLines?: number;
    /**
     * Metadata items to display below description (e.g., read time, date).
     * Array of items with optional icon and label.
     *
     * Icons can be:
     * - Icon name string from the icon library (e.g., 'clock', 'calendar-today')
     * - Custom React element (e.g., <CustomIcon />, <svg>...</svg>)
     *
     * @example
     * ```tsx
     * // Using library icons
     * metadata={[
     *   { icon: 'clock', label: '10 min read' },
     *   { icon: 'calendar-today', label: 'Oct 30, 2025' }
     * ]}
     *
     * // Using custom icons
     * metadata={[
     *   { icon: <BedIcon size={16} />, label: '5' },
     *   { icon: <BathIcon size={16} />, label: '2' },
     *   { icon: <svg>...</svg>, label: '625m²' }
     * ]}
     * ```
     */
    metadata?: SummaryCardMetadata[];
    /**
     * Button text. If provided, button will be displayed.
     */
    buttonText?: string;
    /**
     * Button click handler.
     */
    onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    /**
     * Button disabled state.
     */
    buttonDisabled?: boolean;
    /**
     * Button full width on desktop.
     * - undefined: Auto (full-width for default variant, auto-width for flat variant)
     * - true: Full width on all screen sizes
     * - false: Auto width on desktop (min 120px), full width on mobile
     * @default undefined (auto based on variant)
     */
    buttonFullWidth?: boolean;
    /**
     * Loading state - shows skeleton UI
     * @default false
     */
    loading?: boolean;
    /**
     * Number of skeleton images to show during loading
     * @default 1 for single, 3 for grid
     */
    loadingImageCount?: number;
    /**
     * Error state - shows error message
     * @default false
     */
    error?: boolean;
    /**
     * Custom error title
     * @default 'Failed to load'
     */
    errorTitle?: string;
    /**
     * Custom error message
     */
    errorMessage?: string;
    /**
     * Error retry handler - shows retry button when provided
     */
    onErrorRetry?: () => void;
    /**
     * Empty state title
     * @default 'No content'
     */
    emptyTitle?: string;
    /**
     * Empty state message
     */
    emptyMessage?: string;
    /**
     * Enable lazy loading for all images
     * @default true
     */
    imageLazy?: boolean;
    /**
     * Callback when a single image loads successfully
     */
    onImageLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
    /**
     * Callback when a single image fails to load
     */
    onImageError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
    /**
     * Callback when a grid image loads successfully (includes index)
     */
    onImagesLoad?: (index: number, event: React.SyntheticEvent<HTMLImageElement>) => void;
    /**
     * Callback when a grid image fails to load (includes index)
     */
    onImagesError?: (index: number, event: React.SyntheticEvent<HTMLImageElement>) => void;
    /**
     * Custom overlay content to render at the top of the image
     * Can be used for logos, badges, or any custom React elements
     *
     * @example
     * ```tsx
     * <SummaryCard
     *   images="property.jpg"
     *   topOverlay={
     *     <SummaryCard.Overlay background="dark" height={40} align="center">
     *       <img src="logo.png" alt="Company Logo" style={{ height: 24 }} />
     *     </SummaryCard.Overlay>
     *   }
     * />
     * ```
     */
    topOverlay?: React.ReactNode;
}
/**
 * Props for SummaryCard.Overlay helper component
 */
export interface SummaryCardOverlayProps {
    /**
     * Background style for the overlay
     * - "dark": Semi-transparent dark background (rgba(0, 0, 0, 0.6))
     * - "light": Semi-transparent light background (rgba(255, 255, 255, 0.8))
     * - "transparent": No background
     * - Custom string: Any valid CSS color value
     * @default "dark"
     */
    background?: 'dark' | 'light' | 'transparent' | string;
    /**
     * Height of the overlay
     * @default 40
     */
    height?: number | string;
    /**
     * Horizontal alignment of content
     * @default "center"
     */
    align?: 'left' | 'center' | 'right';
    /**
     * Padding inside the overlay
     * @default 8
     */
    padding?: number;
    /**
     * Content to render inside the overlay
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name
     */
    className?: string;
}
/**
 * Helper component for creating consistently styled overlays on SummaryCard images
 *
 * @example
 * ```tsx
 * <SummaryCard
 *   images="property.jpg"
 *   topOverlay={
 *     <SummaryCard.Overlay background="dark" height={40} align="center">
 *       <img src="logo.png" alt="Logo" style={{ height: 24 }} />
 *     </SummaryCard.Overlay>
 *   }
 * />
 * ```
 */
declare const SummaryCardOverlay: React.ForwardRefExoticComponent<SummaryCardOverlayProps & React.RefAttributes<HTMLDivElement>>;
/**
 * SummaryCard component for displaying entity information with images.
 *
 * Features:
 * - Flexible image layout (single large or 3-image grid)
 * - Optional header with title, subtitle, and badge
 * - Optional description text
 * - Optional action button
 * - All sections conditionally rendered
 * - Composition pattern wrapping Card component
 *
 * @example
 * ```tsx
 * // Restaurant card with single image
 * <SummaryCard
 *   images="restaurant.jpg"
 *   title="Little Nona's"
 *   subtitle="1427 Via Campania"
 *   badge="9.2"
 *   description="A tiny, brick-walled trattoria tucked down a side street..."
 *   buttonText="Add to order"
 *   onButtonClick={() => console.log('clicked')}
 * />
 *
 * // Card with 3 images
 * <SummaryCard
 *   images={[
 *     { src: 'img1.jpg', alt: 'Restaurant exterior' },
 *     { src: 'img2.jpg', alt: 'Pizza' },
 *     { src: 'img3.jpg', alt: 'Pasta' },
 *   ]}
 *   title="Little Nona's"
 *   badge="9.2"
 *   badgeVariant="filled"
 * />
 * ```
 */
declare const SummaryCardComponent: React.ForwardRefExoticComponent<SummaryCardProps & React.RefAttributes<HTMLDivElement>>;
export declare const SummaryCard: typeof SummaryCardComponent & {
    Overlay: typeof SummaryCardOverlay;
};
export {};
//# sourceMappingURL=SummaryCard.d.ts.map