import * as React from 'react';

/**
 * Link item for the link tree
 */
interface LinkTreeLink {
    id: string;
    label: string;
    href: string;
    icon?: string;
    description?: string;
    featured?: boolean;
    badge?: string;
}
/**
 * Social link for the link tree
 */
interface SocialLink {
    id: string;
    platform: string;
    href: string;
    icon: string;
    label?: string;
}
/**
 * Media gallery item for the link tree
 */
interface MediaGalleryItem {
    id: string;
    type: "image" | "video";
    src: string;
    alt?: string;
    href?: string;
}
/**
 * Props for the LinkTreeBlock component
 */
interface LinkTreeBlockProps {
    /**
     * Brand/profile name displayed at the top
     */
    brandName: string;
    /**
     * Optional tagline or bio displayed below the name
     */
    brandTagline?: string;
    /**
     * Optional logo image URL
     */
    brandLogo?: string;
    /**
     * Optional avatar image URL (takes precedence over logo for the avatar display)
     */
    brandAvatar?: string;
    /**
     * Whether to show a verified badge next to the name
     */
    brandVerified?: boolean;
    /**
     * Array of links to display
     */
    links?: LinkTreeLink[];
    /**
     * Array of social media links
     */
    socialLinks?: SocialLink[];
    /**
     * Array of media items for the gallery section
     */
    mediaGallery?: MediaGalleryItem[];
    /**
     * Title for the media gallery section
     */
    mediaGalleryTitle?: string;
    /**
     * Additional CSS classes for the container
     */
    className?: string;
    /**
     * Theme variation for the component.
     * - "light": Light background with dark text (default)
     * - "dark": Dark background with light text
     * - "glass": Glassmorphism effect with gradient background
     */
    theme?: "light" | "dark" | "glass";
    /**
     * Background pattern URL from patternSvgs. Use values from lib/patternSvgs.ts
     * @example backgroundPattern={patternSvgs.dots}
     */
    backgroundPattern?: string;
    /**
     * Custom accent color CSS value (applied as --accent-color CSS variable)
     */
    accentColor?: string;
}
/**
 * LinkTreeBlock - A customizable link-in-bio style page component with three theme variations.
 *
 * This component provides a complete link page solution with:
 * - Brand header with avatar, name, tagline, and optional verified badge
 * - Customizable link list with icons, descriptions, badges, and featured states
 * - Media gallery section for showcasing images and videos
 * - Social media links section
 * - Three theme variations: light, dark, and glass (glassmorphism)
 * - Background pattern customization using patternSvgs
 *
 * @example
 * ```tsx
 * // Light theme (default)
 * <LinkTreeBlock
 *   brandName="Sarah Chen"
 *   brandTagline="Digital creator & photographer"
 *   links={[
 *     { id: "1", label: "My Website", href: "https://example.com", icon: "lucide/globe" }
 *   ]}
 * />
 *
 * // Dark theme with pattern background
 * <LinkTreeBlock
 *   brandName="Sarah Chen"
 *   theme="dark"
 *   backgroundPattern={patternSvgs.dots}
 * />
 *
 * // Glass theme with gradient background
 * <LinkTreeBlock
 *   brandName="Sarah Chen"
 *   theme="glass"
 * />
 * ```
 */
declare function LinkTreeBlock({ brandName, brandTagline, brandLogo, brandAvatar, brandVerified, links, socialLinks, mediaGallery, mediaGalleryTitle, className, theme, backgroundPattern, accentColor, }: LinkTreeBlockProps): React.JSX.Element;

export { LinkTreeBlock, type LinkTreeBlockProps, type LinkTreeLink, type MediaGalleryItem, type SocialLink };
