import * as React from 'react';

/**
 * Legacy feature item
 */
interface LegacyFeature {
    text: string;
}
/**
 * Modern feature item with emoji indicator
 */
interface ModernFeature {
    emoji: string;
    text: string;
}
interface ComparisonLegacyModernProps {
    /**
     * Main heading content (before highlight)
     */
    heading?: React.ReactNode;
    /**
     * Highlighted portion of heading
     */
    headingHighlight?: React.ReactNode;
    /**
     * Description text below heading
     */
    description?: React.ReactNode;
    /**
     * Title for legacy features column
     */
    legacyTitle?: React.ReactNode;
    /**
     * Array of legacy feature items
     */
    legacyFeatures?: LegacyFeature[];
    /**
     * Title for modern features column
     */
    modernTitle?: React.ReactNode;
    /**
     * Array of modern feature items
     */
    modernFeatures?: ModernFeature[];
    /**
     * Custom slot for rendering columns (overrides default columns)
     */
    columnsSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the heading highlight
     */
    headingHighlightClassName?: string;
    /**
     * Additional CSS classes for the description
     */
    descriptionClassName?: string;
    /**
     * Additional CSS classes for the columns grid
     */
    columnsGridClassName?: string;
    /**
     * Additional CSS classes for the legacy column
     */
    legacyColumnClassName?: string;
    /**
     * Additional CSS classes for the modern column
     */
    modernColumnClassName?: string;
}
/**
 * ComparisonLegacyModern - Legacy vs Modern features split layout
 *
 * Displays a two-column comparison between legacy/old approaches and modern/new
 * solutions. The legacy column uses muted styling with X icons for pain points,
 * while the modern column uses a bordered card with emoji indicators for benefits.
 * Features are separated by dividers for clear visual hierarchy.
 *
 * Best for: Digital transformation messaging, product modernization pitches,
 * before/after comparisons, migration benefits, upgrade justifications.
 */
declare function ComparisonLegacyModern({ heading, headingHighlight, description, legacyTitle, legacyFeatures, modernTitle, modernFeatures, columnsSlot, className, containerClassName, headingClassName, headingHighlightClassName, descriptionClassName, columnsGridClassName, legacyColumnClassName, modernColumnClassName, }: ComparisonLegacyModernProps): React.JSX.Element;

export { ComparisonLegacyModern, type ComparisonLegacyModernProps };
