import * as React from 'react';

/**
 * Bento link item for the bento layout link page
 */
interface BentoLink {
    id: string;
    label: string;
    href: string;
    icon?: string;
    description?: string;
    featured?: boolean;
    imageUrl?: string;
}
/**
 * Social link for the bento layout link page
 */
interface BentoSocialLink {
    id: string;
    platform: string;
    href: string;
    icon: string;
}
/**
 * Props for the LinkPageBentoLayout component
 */
interface LinkPageBentoLayoutProps {
    /**
     * Profile name displayed at the top
     */
    name: string;
    /**
     * Optional bio or description
     */
    bio?: string;
    /**
     * Avatar image URL
     */
    avatarUrl?: string;
    /**
     * Array of links to display in bento grid
     */
    links?: BentoLink[];
    /**
     * Array of social media links
     */
    socialLinks?: BentoSocialLink[];
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Theme variation: "light" or "dark"
     */
    theme?: "light" | "dark";
}
/**
 * LinkPageBentoLayout - A modern bento grid style link page.
 *
 * This component provides a visually striking link page with:
 * - Profile header with avatar, name, and bio
 * - Bento grid layout with featured links in larger cells
 * - Featured links can include background images
 * - Regular links in smaller cells
 * - Social media links section
 * - Light and dark theme support
 *
 * The bento layout creates visual hierarchy by making featured links
 * more prominent with larger cells and optional background images.
 *
 * @example
 * ```tsx
 * <LinkPageBentoLayout
 *   name="Digital Creator"
 *   bio="Content creator & entrepreneur"
 *   links={[
 *     {
 *       id: "1",
 *       label: "Latest Video",
 *       href: "https://youtube.com",
 *       icon: "simple-icons/youtube",
 *       featured: true,
 *       imageUrl: "/video-thumbnail.jpg"
 *     },
 *     { id: "2", label: "Blog", href: "/blog", icon: "lucide/pen-line" }
 *   ]}
 * />
 * ```
 */
declare function LinkPageBentoLayout({ name, bio, avatarUrl, links, socialLinks, className, theme, }: LinkPageBentoLayoutProps): React.JSX.Element;

export { type BentoLink, type BentoSocialLink, LinkPageBentoLayout, type LinkPageBentoLayoutProps };
