import React from 'react';
import { TemplateSummary as TemplateSummaryBase } from './TemplateSummary';
import { VariantSummary as VariantSummaryBase } from './VariantSummary';
import { TransitionRow as TransitionRowBase } from './TransitionRow';
import { DropIndicator as DropIndicatorBase } from './DropIndicator';

/**
 * Memoized versions of Canvas components
 * Prevents unnecessary re-renders when parent updates
 */

export const TemplateSummary = React.memo(TemplateSummaryBase);
TemplateSummary.displayName = 'TemplateSummary';

export const VariantSummary = React.memo(VariantSummaryBase);
VariantSummary.displayName = 'VariantSummary';

export const TransitionRow = React.memo(TransitionRowBase);
TransitionRow.displayName = 'TransitionRow';

export const DropIndicator = React.memo(DropIndicatorBase);
DropIndicator.displayName = 'DropIndicator';
