import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';

/**
 * A single Instagram post rendered as a grid tile.
 *
 * Mirrors the wire shape hydrated from the toastability Instagram feed
 * (`PublicFeeds::InstagramPostSerializer`). Media URLs MUST be the re-hosted
 * MediaRecord CDN URLs — never expiring Instagram CDN URLs.
 */
interface InstagramPostItem {
    /**
     * Unique identifier for the post
     */
    id: string;
    /**
     * External Instagram permalink (opens instagram.com in a new tab)
     */
    href: string;
    /**
     * Image / poster source URL (required — items without it are skipped)
     */
    image: string;
    /**
     * Alt text for the image (falls back to "Instagram post")
     */
    imageAlt?: string;
    /**
     * Post caption (truncated for display)
     */
    caption?: React.ReactNode;
    /**
     * Whether this post is a video/reel
     */
    isVideo?: boolean;
    /**
     * Video source URL (only used when `isVideo` is true)
     */
    videoUrl?: string;
    /**
     * Formatted post date
     */
    date?: React.ReactNode;
    /**
     * Number of likes (badge is only rendered when present)
     */
    likeCount?: number;
    /**
     * Number of comments (badge is only rendered when present)
     */
    commentCount?: number;
    /**
     * Number of views (badge is only rendered when present)
     */
    viewCount?: number;
    /**
     * Additional CSS classes for the tile
     */
    className?: string;
}
interface InstagramPostGridProps {
    /**
     * Main heading content
     */
    heading?: React.ReactNode;
    /**
     * Subheading/intro content below the heading
     */
    subheading?: React.ReactNode;
    /**
     * Array of Instagram posts to display
     */
    items?: InstagramPostItem[];
    /**
     * Custom slot for rendering items (overrides items array)
     */
    itemsSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the header container
     */
    headerClassName?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the subheading
     */
    subheadingClassName?: string;
    /**
     * Additional CSS classes for the grid container
     */
    gridClassName?: string;
    /**
     * Additional CSS classes for each tile
     */
    itemClassName?: string;
    /**
     * Additional CSS classes for each media element
     */
    imageClassName?: string;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name or URL
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the pattern overlay
     */
    patternClassName?: string;
    /**
     * OptixFlow image optimization configuration
     */
    optixFlowConfig?: OptixFlowConfig;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * InstagramPostGrid displays a responsive, square-tiled grid of Instagram posts.
 *
 * Each tile links out to the post's instagram.com permalink in a new tab. Images
 * render via `@page-speed/img`; video posts render an in-grid `@page-speed/video`
 * that plays muted on hover (progressive/on-interaction). Captions are truncated,
 * an optional date is shown, and like/comment/view badges appear only when the
 * corresponding count is present — never fabricated. Posts without an image are
 * skipped; an empty or missing `items` array renders nothing.
 *
 * Data is hydrated from the toastability Instagram feed. Media URLs are the
 * re-hosted MediaRecord CDN URLs, never expiring Instagram CDN URLs.
 *
 * @example
 * ```tsx
 * <InstagramPostGrid
 *   heading="Follow us on Instagram"
 *   items={[
 *     {
 *       id: "1",
 *       href: "https://www.instagram.com/p/abc123/",
 *       image: "https://cdn.ing/assets/i/r/1320/instagram-1.webp",
 *       caption: "Fresh out of the oven",
 *       likeCount: 128,
 *       commentCount: 12,
 *     },
 *   ]}
 * />
 * ```
 */
declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: InstagramPostGridProps): React.JSX.Element | null;

export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };
