import React from 'react';
import { Overlay } from '../Overlay';
export interface PhotoCarouselProps {
    /**
     * Array of image URLs to display in the carousel
     */
    images: string[];
    /**
     * Optional overlay content to display on top of photos (e.g., branding, logo)
     */
    topOverlay?: React.ReactNode;
    /**
     * Aspect ratio for photos (CSS aspect-ratio value)
     * @default '16/9'
     * @example '16/9', '4/3', '1/1', '21/9'
     */
    aspectRatio?: string;
    /**
     * Show navigation dots
     * @default true
     */
    showDots?: boolean;
    /**
     * Show previous/next arrow buttons
     * @default true
     */
    showArrows?: boolean;
    /**
     * Callback when photo index changes
     */
    onPhotoChange?: (index: number) => void;
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Loading state
     * @default false
     */
    loading?: boolean;
    /**
     * Error state
     * @default false
     */
    error?: boolean;
}
/**
 * PhotoCarousel - Embla-based photo carousel with navigation dots and arrows.
 * Lightweight component for inline photo viewing (not fullscreen).
 *
 * @example
 * ```tsx
 * <PhotoCarousel
 *   images={['photo1.jpg', 'photo2.jpg', 'photo3.jpg']}
 *   aspectRatio="16/9"
 *   topOverlay={
 *     <PhotoCarousel.Overlay background="#0066CC" align="center">
 *       <img src="logo.png" alt="Agency" style={{ height: 24 }} />
 *     </PhotoCarousel.Overlay>
 *   }
 * />
 * ```
 */
export declare const PhotoCarousel: React.FC<PhotoCarouselProps>;
export declare const PhotoCarouselWithOverlay: typeof PhotoCarousel & {
    Overlay: typeof Overlay;
};
//# sourceMappingURL=PhotoCarousel.d.ts.map