import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B-KhRX9B.js';
import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
import 'react/jsx-runtime';
import './dynamic-icon.js';
import '@page-speed/icon';
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).
     *
     * NOTE: For immersive rendering the caption must be a **string** — the
     * library's `MediaItem.title`/`caption` are string-typed, so a caption is
     * flowed through as text. A rich `ReactNode` caption (hand-authored markup,
     * only ever used by the legacy pre-immersive block) cannot be threaded into
     * the immersive card/viewer; when supplied it is dropped and the tile/viewer
     * title falls back to `imageAlt` (then `"Instagram post"`). Hydrated feeds
     * always send plain strings, so this only affects hand-authored usage.
     */
    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;
    /**
     * Instagram account username (leading `@` tolerated). Renders as a
     * prominent, semi-transparent, clickable `@username` badge in the fullscreen
     * viewer's caption card that opens the account's profile
     * (`https://www.instagram.com/<username>/`) in a new tab. When omitted the
     * badge degrades to a non-clickable "Instagram" chip — a handle is never
     * fabricated.
     */
    username?: string;
    /**
     * Show the like-count pill on grid tiles. Defaults to `false`: clients with
     * low like counts don't want them visible, so the pills stay hidden until
     * per-client dynamic visibility ships. The pill implementation is retained
     * intentionally — flip this prop to bring it back.
     */
    showLikeBadges?: boolean;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * InstagramPostGrid displays a website's Instagram feed as a responsive grid of
 * vertical (9:16) tiles that open a fullscreen, swipeable immersive viewer.
 *
 * Composition is powered by `@page-speed/media-immersive`: each post maps to a
 * `MediaItem` (photos are first-class images, reels are videos), tiles are
 * `ThumbnailCard`s, and tapping one opens `ImmersiveViewer` — a TikTok/Reels-
 * style pager. Per the annotated design, each tile shows a like-count pill
 * top-left (only when a numeric like count exists — never fabricated), no
 * duration timestamp, and a center glyph on hover only (a play triangle for
 * reels, an expand icon for photos). The fullscreen viewer carries the caption
 * plus a read-only engagement rail (likes/comments/views) and an explicit
 * "Open in Instagram" egress rendered as a real `<a target="_blank"
 * rel="noopener noreferrer">` (a crawlable, affordance-correct link — not a
 * scripted `window.open` button); the old whole-tile link-out is REPLACED by
 * opening the viewer, with the permalink egress living in the viewer.
 *
 * Consumer image concerns are honored: `imageClassName` and `optixFlowConfig`
 * are forwarded onto each tile's poster image via the library's
 * `posterImgProps` passthrough.
 *
 * Captions should be plain strings when used with immersive rendering; a rich
 * `ReactNode` caption falls back to `imageAlt` (see the `caption` field doc).
 *
 * 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, spacing, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, username, showLikeBadges, background, pattern, patternOpacity, patternClassName, }: InstagramPostGridProps): React.JSX.Element | null;

export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };
